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

Appending a new drop down selector using jquery .append method

本文关键字：一个 选择器 append jquery 方法 追加 使用      更新时间：2023-09-26

每次按下按钮时，我都想添加另一个下拉选择器。目前我正在使用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代码是相同的。

首先，您还没有将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，这个div包含了select。

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

检查此演示Fiddle

使用jqueryclone((

注意：您不能附加此-

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

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

相关文章：