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

如果我理解你的问题，你应该使用克隆

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

Fiddle

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

3 个答案: