Question

我正在尝试添加一些表单内容，具体取决于用户选择的选项。

例如，如果用户选择表单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执行此操作？

Answer 1

试试这个：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。

Answer 2

正如您在评论中提到的那样，内容可以进行硬编码，那么您可以同时编写表单并将表单放在不同的div中，并根据从下拉列表中选择的内容切换div的可见性< / p>

例如，假设您的表单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 希望这有帮助

Answer 3

我建议你保留两个独立的表格。让它们可见！因此，使用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

Answer 4

这样的东西？当您选择选项表单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');
});

Answer 5

为表单添加ID。然后使用document.getElementById('idname').innerHTML填充值

Answer 6

我会建议这（与你讨论）

<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();
  });   
});

JQuery根据所选的选项填充表单

6 个答案:

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