使用Jquery动态添加/删除下拉项

时间:2017-05-12 10:50:10

标签: jquery asp.net-mvc

我正在使用MVC中的应用程序。我要求选择一个项目应该附加到列表项目和selcetd dropndown值。这里我已经达到了我的要求。 下一步当我从列表中删除任何选定的项时,该值应再次附加到下拉列表。 这是我的代码 -

@Html.DropDownList("RateType", new List<SelectListItem>()
                                      {
                                          new SelectListItem(){ Text= "Hour", Value = "1"},
                                          new SelectListItem(){ Text= "Day", Value = "2"},
                                          new SelectListItem(){ Text= "Week", Value = "3"},
                                          new SelectListItem(){ Text= "Project", Value = "4"}
                                         }, "-Select-", new { @class = "form-control", id = "ddltype" })

在Jquery

 $("#addItem").click(function () {
        var selectedValue = document.getElementById('ddltype');
        var selectedText = selectedValue.options[selectedValue.selectedIndex].innerHTML;
        var desireMax = parseFloat(document.getElementById('maxRatevalue').value);
        var desireMin = parseFloat(document.getElementById('minRatevalue').value);
        var index = $('#ddltype').get(0).selectedIndex;
        $('#ddltype option:eq(' + index + ')').remove();
        $("ul").append("<li>" + "Type: " + selectedText + " High: " + desireMax + " Low: " + desireMin +" <a href='javascript:void(0);' class='remove'>X</a></li>");
    });
    $(document).on("click", "a.remove", function () {
        $(this).parent().remove();
    });

那么如何在同一位置再次将项目附加到下拉列表中。 另外我想知道如何动态地将Id(比如下拉列表ID)绑定到列表项?

1 个答案:

答案 0 :(得分:0)

您可以使用jquery Append方法。尝试以下代码。

 $("#ddltype").eq(2).before($("<option></option>").val("").text("Select"));

指定要添加新选项的索引,也可以使用.after()插入对象。 (另请参阅.insertBefore().insertAfter()