Question

我是jquery的新手，我意识到我可能会问一个平庸的问题，但我似乎无法找到解决方案：我想创建一个表单，在用户选择了选项后，“是”＆＃39;在下拉菜单中，将显示更多字段以及其他下拉菜单，并显示相同的问题。我们的想法是不断添加更多字段，只要用户选择“是”＆＃39; 我意识到它应该涉及on（）或change（）。

基本应该看起来像这样：

<div id="moreFields">
 <fieldset class="input-block"><label for="otherProvider">other Providers?</label>
  <div class="dropdown">
   <select id="otherProvider" name="otherProvider" class="dropdown-select">
    <option value="no">no</option>
    <option value="yes">yes</option>
  </select></div></fieldset>
</div>
$('document').ready( function()
 {
   $('#otherProvider').change(function()
      {
        //add more fields, and add a new dropdown menu.
      }
 });

Answer 1

那是你在寻找什么？

$(document).ready( function()
 {
   $('#moreFields').on('change','#otherProvider',function()
      {
          if($(this).val() == 'yes'){
             $('#moreFields').append('<fieldset class="input-block"><label for="otherProvider">other Providers?</label><div class="dropdown"><select id="otherProvider" name="otherProvider" class="dropdown-select"><option value="no">no</option><option value="yes">yes</option></select></div></fieldset>');
          }
      }
   );
 });

DEMO Here

编辑：正如A.Wolff注意到他是对的.. ID必须是唯一的，所以请改用Classes。

Answer 2

没有jQuery完成：

<div id="moreFields">
  <fieldset>
    <label for="otherProvider">other Providers?</label> <select class="dropdown-select" id="otherProvider" name="otherProvider" onchange="myFunct(this.id)">
      <option value="no">
        no
      </option>

      <option value="yes">
        yes
      </option>
    </select>
  </fieldset>
</div>

<script>
function myFunct(id) {
  var e = document.getElementById(id);
  var valu = e.options[e.selectedIndex].value;
  if (valu == "yes") {
    var div = document.createElement("fieldset");
    div.innerHTML = "other Providers?";
    var select = document.createElement("select");
    select.innerHTML = '<option value="no">no</option><option value="yes">yes</option>';
    select.id = Math.floor((Math.random() * 10000) + 1);
    select.onchange = function() {
      myFunct(this.id);
    };
    div.appendChild(select);
    document.getElementById("moreFields").appendChild(div);
  }
}
</script>

使用jquery中的事件动态创建表单

2 个答案: