javascript - 使用 jquery .append 方法附加新的下拉选择器

Question

我想在每次按下按钮时添加花药下拉选择器。目前我正在使用 JQUERY 添加新的下拉字段，但是，我无法添加新的下拉选择器。目前该代码无法正常工作。下面是代码:

jsfiddle

Jquery:

$(document).ready(function(){
  existingdiv1 = document.getElementById( "dropDown" );    
  $("#btn1").click(function(){
  $("z").append('<strong>Hello</strong>', existingdiv1);
  });
});

HTML:

<div class="control-group">
  <div class="controls">
    <z>
    <select id="servingSizeUnits" class="selectpicker btn-medium btn-block" data-style="btn-info" name="dropDown" id="dropDown">
       <optgroup label="Select Product Type">
           <option name="dropDown" value="val1">val1</option>
           <option name="dropDown" value="val2">val2 </option>
           <option name="dropDown" value="val3">val3</option>
           <option name="dropDown" value="val4">val4</option>
           <option name="dropDown" value="val5">val5</option>
      </optgroup>
    </select>
      </z>    
      </div>    
 </div>    

    <button id="btn2" class="btn btn-primary" data-activate="#payment" type="submit">Add Selector</button>

任何建议都会很棒。

更新1:我已经确保SO和fiddle代码是相同的。

Answer 1

首先，你没有在你的 fiddle 中包含jquery..我已经更新了你的 fiddle ，我将其附加在这里。 http://jsfiddle.net/aR9r9/2/

$(document).ready(function(){
  $("#btn2").click(function(){
  $(".app").append('<input class="input-block-level" type="text" name="newfield" id="newField" placeholder="New Field">'
  );
  });
});

在这里，我将选择器附加到包含选择的 div 中。