使用 jquery 附加另一个下拉列表答案

【问题标题】：Append another dropdown using jquery使用 jquery 附加另一个下拉列表
【发布时间】：2015-06-02 10:07:19
【问题描述】：

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

这是用户不能创建超过 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();
});

下面是我的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'>

【问题讨论】：

添加和删除按钮在哪里？当您调用下拉其select 标签而不是input
啊，我明白了。所以我将输入更改为选择。但仍然。每当我添加新的下拉列表时，它都会显示一个空的下拉列表。我想添加类似的下拉菜单。
您想要具有相同值的精确下拉列表吗？
具有不同但具有相同值的下拉菜单。

标签： jquery html asp.net-mvc

【解决方案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"})

【讨论】：

在他的代码中，他创建了一个文本框，而不是一个下拉列表。但我认为这是他的问题。
@ChauThan，阅读他的评论啊，我明白了。所以我将输入更改为选择。但仍然。每当我添加新的下拉菜单时，它都会显示一个空的下拉菜单。
好吧，这对他来说是最好的解决方案。
顺便说一句，请编辑"id" : ++counter。我认为它在事件删除中不起作用。
@ChauThan，OP 正在使用 counter 来跟踪没有元素。

【解决方案2】：

如果我正确理解您的问题，您应该使用 clone as

<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 对象代替模板对象

【讨论】：

好的，谢谢。这就是我一直在寻找的。至少这是最接近的。非常感谢。 =)

【解决方案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--;
     }
 });

Fiddle

【讨论】：