Question

每次按下按钮，我都想添加花药下拉选择器。目前我正在使用JQUERY添加新的下拉字段，但是，我无法添加新的下拉选择器。目前代码不起作用。以下是代码：

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和小提琴代码相同。

Answer 1

首先，你没有把jquery包含在你的小提琴里。我已经更新了你的小提琴，我把它附在这里。 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。

Answer 2

var count = 0;
$(document).ready(function(){
  $("#btn2").click(function(){
     count ++; 
    var select = $('#servingSizeUnits').clone().attr('id',$('#servingSizeUnits').attr('id')+count).attr('name',$('#servingSizeUnits').attr('name')+count); 
  $("z").append(select);
  });
});

选中 Demo Fiddle

使用jquery clone()

注意：您无法附加此内容 -

<input class="input-block-level" type="text" name="newfield" id="newField" placeholder="New Field">

因为 Id属性将重复，这是不可取的。

使用jquery .append方法追加新的下拉选择器

2 个答案: