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

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

这是用户不能创建超过10个下拉框的条件的jquery脚本

$("#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();
});

$（“#添加按钮”）。单击（函数（）{
如果（计数器>10）{
警报（“仅允许10个下拉列表”）；
返回false；
}
var newDDBoxDiv=$（document.createElement（'div'））
.attr（“id”+计数器）；
newDDBoxDiv.after（）.html（'下拉列表#'+计数器+'：'+
'');
newDDoxDiv.附录（“#mb”）；
计数器++；
});
$（“#移除按钮”）。单击（函数（）{
如果（计数器==1）{
警报（“不再需要删除下拉列表”）；
返回false；
}
计数器--；
$（“#tid”+计数器）。删除（）；
});

下面是我的cshtml

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

@DropDownListFor（model=>model.MC，ViewBag.lCountry作为SelectList，“--select--”，new{@id=“tid”}）

上面的代码不起作用。如果有人对如何实现这一目标有任何建议，请分享

编辑：按钮在下面

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

使用

---

试试这样的

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

var计数器=0；
$（“#添加按钮”）。单击（函数（）{
如果（计数器>=10）{
警报（“仅允许10个下拉列表”）；
}否则{
计数器++；
$（document.body）.append（“”+
'下拉菜单#'+计数器+'：'+
'' +
//在这里添加您的选项。。。
'');
}
});
$（“#移除按钮”）。单击（函数（）{
如果（counter如果我正确理解你的问题，你应该使用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>


沃尔沃汽车
萨博
$（文档）.ready（函数（）{
$（“#添加按钮”）。单击（函数（）{
变量元素=$（“选择[id！='template']）；
var newElement=$（“#模板”）.clone（true）；
var count=elements.length；
如果（计数>8）
{
警报（“不再有下拉列表”）；
}
其他的
{
newElement.attr（'id'，count）；//重命名新元素，使其引用可分辨对象而不是克隆对象
$（“#测试”）.append（新元素）；
}
});
});

很明显，你的DropDownList对象取代了模板对象
添加和删除按钮在哪里？当你调用下拉列表时，它的
选择
标记不是
输入
啊，我明白了。所以我将输入改为选择。但是，每当我添加新的下拉列表时，它都会显示一个空的下拉列表。我想添加类似的下拉列表，因为我已经有了e、 你想要有相同值的精确下拉列表吗？有不同值的下拉列表，但是的，有相同值的下拉列表。在他的代码中，他创建了一个文本框，而不是下拉列表。但我认为这是他的问题。@ChauThan，读他的评论啊，我明白了。所以我将输入更改为“选择”。但仍然。每当我添加新的下拉列表时，它都会显示一个空下拉列表。好的，这是最好的选择为他解答。顺便说一句，请编辑
“id”：++计数器
。我认为它在事件移除中不起作用。@ChauThan，OP正在使用
计数器
跟踪元素的数量。是的，谢谢。这是我正在寻找的。至少这是最接近的。非常感谢。=）
 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--;
     }
 });

<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>