使用jquery追加另一个下拉列表

Question

我想添加一个下拉列表。我要做的就是在按钮的帮助下简单地添加另一个下拉列表。下拉菜单中应该包含与现有下拉菜单相同的项。下面是我的代码。

这是一个jquery脚本，用于用户不能创建超过10个的下拉框。

$("#addButton").click(function() {
    if (counter > 10) {
        alert("Only 10 dropdowns allowed");
        return false;
    }
    var newDDBoxDiv = $(document.createElement('div'))
        .attr("id", +counter);
    newDDBoxDiv.after().html('<label>dropdown #' + counter + ' : </label>' +
        '<select type="text" name="dropdown' + counter +
        '" id="dropdown' + counter + '" value="" >');
    newDDoxDiv.appendTo("#mb");
    counter++;
});
$("#removeButton").click(function() {
    if (counter == 1) {
        alert("No more dropdown to remove");
        return false;
    }
    counter--;
    $("#tid" + counter).remove();
});

和下面是我的cshtml

  <div class="editor-field" id="mb">
@Html.DropDownListFor(model => model.MC, ViewBag.lCountry as SelectList, "--select--", new{@id="tid"})

上面的代码不起作用。如果有人对如何完成它有任何建议，请分享。

编辑:按钮在

下面

  <input type='button' value='Add' id='addButton'>
  <input type='button' value='Remove' id='removeButton'>

Answer 1

使用

//Create a div
var newDDBoxDiv = $('<div />',
{
    "id": "tid0" + (++counter)
});
//Append label
newDDBoxDiv.append('<label>dropdown #' + counter + ' : </label>');
//Clone select
var select = $("#tid").clone(true);
//Updated id
select.prop("id", "dropdown" + counter);
//Append cloned select to new div
newDDBoxDiv.append(select);
//Append to div
newDDoxDiv.appendTo("#mb");

注意:将select的ID更新为tid0

@Html.DropDownListFor(model => model.MC, ViewBag.lCountry as SelectList, "--select--", new{@id="tid0"})

Answer 2

如果我正确理解你的问题，你应该使用clone作为

<select id="template">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
<div id="test">
</div>
 <input type='button' value='Add' id='addButton'>
 <input type='button' value='Remove' id='removeButton'>
<script>
$(document).ready(function(){
$("#addButton").click(function(){
var elements=$("select[id!='template']");
var newElement=$("#template").clone(true);
var count=elements.length;
if(count>8)
{
    alert('no more dropdowns');
}
else
{
    newElement.attr('id',count);//rename new element so that it refers to     distinguished object instead of cloned object
    $("#test").append(newElement);
}

});
});
</script>

显然你有一个DropDownList对象来代替模板对象

Answer 3

试试这样做…'

 var counter = 0;
 $('#addButton').click(function () {
     if (counter >= 10) {
         alert("Only 10 dropdowns allowed");
     } else {
         counter++;
         $(document.body).append('<div id="' + counter + '">' +
             '<label>dropdown #' + counter + ' : </label>' +
             '<select name="dropdown' + counter +
             '" id="dropdown' + counter + '">' +
         // Add your options here...
         '</select></div>');
     }
 });
 $('#removeButton').click(function () {
     if (counter <= 0) {
         alert("No dropdowns to remove");
     } else {
         $(document.body).find('div#' + counter).eq(0).remove();
         counter--;
     }
 });

小提琴