0

我正在尝试根据用户选择的选项添加一些表单内容。

例如，如果用户选择表单 1 选项，则表单将填充不同的内容，如果用户选择选项 2

<select>
<option>Form 1</option>
<option>Form 2</option>
</select>

<form>
Here we get either form 1 content or form 2 content depending on the select option selected by user.
</form>


//Form 1 content
<input type="text" value="something" />
<input type hidden="something here" />

//Form 2 content
<input type="text" value="something else here" />
<input type hidden="something else here" />

我怎样才能使用 jquery 做到这一点？

4

6 回答 6

2

试试这个：http: //jsfiddle.net/QUbEE/1/

$('select').change(function () {
  if ($('option:selected', this).val() == 1) {
      //$('form').hide();
      $('#form-1').html($('<input />').attr({
        'id': 'textBox1',
            'value': 'Something is here'
    }));
  } else {
      $('#form-1').html($('<input />').attr({
        'id': 'textBox2',
            'value': 'Something ELSE is here'
      }));
  }
});

Create elems depends on the change event然后只是replace the html of the form with the new input with new values。

于 2013-02-18T10:43:22.883 回答
1

正如您在评论中提到的内容可以被硬编码，那么您可以编写表单并将表单放置在不同的 div 中，并根据从下拉列表中所做的选择切换 div 的可见性

例如，假设您的表单 1 在 div1 

<div id="div1" class="formDiv">
  <input type="text" id="form1" value="something" />
  <input type hidden="something here" />
</div>

而你的 form2 在 div2

<div id="div2" class="formDiv">
  <input type="text" id="form2" value="something" />
  <input type hidden="something here" />
</div>

在你的 CSS 中隐藏两个 div（使用类——例如） 

.formDiv {
  display: none;
}

说你的下拉菜单看起来像这样 

<select id="selectForm">
<option value="div1">Form 1</option>
<option value="div2">Form 2</option>
</select>

现在，当用户从下拉列表中选择时，更改 div 的可见性

$('#selectForm').on('change',function(){
   $('.formDiv').hide();
   var formID = $('#selectForm').val();  
   $(formID).css('display', 'block');
});

这只是一个示例，您可以根据可行性和效率提供自己的 ID 和 CLASS。
希望这可以帮助

于 2013-02-18T10:41:09.013 回答
1

我建议你用两个分开的表格来保存它。并让它们可见！因此，使用 javascript，您可以隐藏两种形式并显示相关的形式。这样，如果浏览器不支持 javascript，表单仍然可以使用：

  <select id="toggle-forms">
    <option value="1">Form 1</option>
    <option value="2">Form 2</option>
  </select>
  <form id="form-1" class="form-to-toggle" acvtion="" method="">
    <input type="text" value="something" />
    <input type hidden="something here" />
    <input type="submit" value="submit form 1"/>
  </form>
  <form id="form-2" class="form-to-toggle" acvtion="" method="">
    <input type="text" value="something" />
    <input type hidden="something here" />
    <input type="submit" value="submit form 2"/>
  </form>
  <script>
  $('#toggle-forms').on('change', function() {
    $('.form-to-toggle').hide();
    $('#form-'+this.value).show();
  }).change();
  </script>

在行动中看到它：http: //jsbin.com/iwocid/1

于 2013-02-18T10:45:49.470 回答
0

像这样的东西？当您选择选项表格 2 时，您将在表格 2 的输入中添加测试

<select>
<option value="1">Form 1</option>
<option value="2">Form 2</option>
</select>


//Form 1 content
<input type="text" id="form1" value="something" />
<input type hidden="something here" />

$('select').on('change',function(){
     $('input#form'+this.value).val('testing');
});
于 2013-02-18T10:33:29.913 回答
0

在表单中添加一个 id。然后使用document.getElementById('idname').innerHTML填充值

于 2013-02-18T10:33:40.000 回答
0

我会建议这个（正如你所讨论的那样）

<select id='this'>
<option value="Form_1">Form 1</option>
<option value="Form_2">Form 2</option>
</select>
<form id='Form_1' style='display:none'>
form1 content
</form>
<form id='Form_2' style='display:none'>
 form2 content
</form>

和js

$(document).ready(function() {  
 $('#this').change(function () {
    var form = $('#this').val();
    $('#'+form).show();
  });   
});
于 2013-02-18T10:44:37.543 回答