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

Question

我是 jquery 新手，我意识到我可能会问一个平庸的问题，但我似乎找不到解决方案: 我想创建一个表单，在用户在下拉菜单中选择"is"选项后，将出现更多字段以及附加的下拉菜单，并提出相同的问题。这个想法是只要用户选择"is"就不断添加更多字段 我意识到它应该涉及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 必须是唯一的，因此请使用类..