如何使用JQuery删除动态创建的下拉列表中的值？

我的要求是：

1 – 如果我从下拉列表中选择任何选项，则它不应显示在除当前下拉列表之外的任何其他下拉列表中。

2 – 如果我将上面选择的选项更改为其他选项，那么之前选择的选项应该在所有下拉列表中再次显示（添加），并且应从所有其他下拉列表中删除新选项。

HTML

 
 
 
  
 
  Entity Name Tag Mac Tag Number Sub Category Department Name In Time Out Time  
 
  <!--  --> 
 
 
  

JavaScript的

 function cloneRow() { counter++; if (counter >= 7) { return; } else { var a = $("table#table").find("tbody"); var b = a.find("tr:first"); $trLast1 = a.find("tr:last"); $trNew = b.clone(); $trNew.find("button#dltbtn").remove().end(); $trNew.find("td:first").append(''); $trLast1.after($trNew); } } function deleteRow(a) { $(a).closest("tr").remove(); counter--; } 

Answer 1

确定你想要做什么有点困难。 我在这里捅了一下。

示例： https ： //jsfiddle.net/Twisty/1L152xyj/

JavaScript的

 function cloneRow($obj) { $obj = $obj.length ? $obj : $("#table tbody"); counter++; if (counter >= 7) { $(".btn-plus").button("disable"); return; } else { var b = $obj.find("tr:first"); $trLast1 = $obj.find("tr:last"); $trNew = b.clone(); $trNew.find(".btn-plus").remove(); $trNew.find("td:first").append($("", { type: "button", class: "btn btn-minus custom-icon glyphicon glyphicon-minus", title: "Remove Row" }).button({ icon: "ui-icon-minus" }).click(function() { deleteRow(this); })); $trLast1.after($trNew); } } function deleteRow(a) { $(a).closest("tr").remove(); $(".btn-plus").button("enable"); counter--; } var counter = 0; $(function() { $(".btn-plus").button({ icon: "ui-icon-plus" }); $(".btn-plus").click(function() { cloneRow($("#table tbody")); }); }); 

希望有所帮助。

更新

我认为这可能更接近你所描述的内容。 请评论并告诉我。

https://jsfiddle.net/Twisty/1L152xyj/6/

HTML代码段

        Entity Name Tag Mac Tag Number Sub Category Department Name In Time Out Time        **JavaScript 

JavaScript的

 function cloneRow($obj) { $obj = $obj.length ? $obj : $("#table tbody"); counter++; if (counter >= 7) { $(".btn-plus").button("disable"); return; } else { var selectIndex = $obj.find("tr:first option:selected").index(); var b = $obj.find("tr:first"); $trLast1 = $obj.find("tr:last"); $trNew = $("", { id: "row-" + counter }); b.find("td").each(function() { $(this).clone().appendTo($trNew); }); $trNew.find(".btn-plus").remove(); $trNew.find("td:first").append($("", { type: "button", class: "btn btn-minus custom-icon glyphicon glyphicon-minus", title: "Remove Row" }).button({ icon: "ui-icon-minus" }).click(function() { deleteRow(this); })); $trNew.find("select") .attr("id", "selectedItem_" + counter) .find("option").eq(selectIndex).prop("selected", true); $trLast1.after($trNew); } } function deleteRow(a) { $(a).closest("tr").remove(); $(".btn-plus").button("enable"); counter--; } var counter = 1; $(function() { $(".btn-plus").button({ icon: "ui-icon-plus" }); $(".btn-plus").click(function() { cloneRow($("#table tbody")); }); }); 

这会克隆所有内容，但会更新id属性以确保它们是唯一的。 它还克隆选项的选定属性。

更新2

如果要禁用某个选项，则在克隆该行时，可以这样做：

 $trNew.find("select") .attr("id", "selectedItem_" + counter) .find("option").eq(selectIndex).prop("disabled", true); 

示例： https ： //jsfiddle.net/Twisty/1L152xyj/7/

更新3

如果您不希望此选项出现在其他select元素中，并且每当更改第一个选择时也会将其删除，则必须执行更多操作。 我建议存储选项列表：

 var options = [{ value: "entityName", label: "Entity Name", }, { value: "transmitter_mac", label: "Tag Mac" }, { value: "tag_number", label: "Tag Number" }, { value: "sub_category", label: "Sub Category" }, { value: "name", label: "Department Name" }, { value: "in_time", label: "In Time" }, { value: "out_time", label: "Out Time" }]; 

这样您就可以随时添加，删除或更改选项。 一个简单的函数可以帮助这个：

 function replaceSelect($target, key) { $target.find("select").find("option").remove(); $.each(options, function(k, v) { if (key !== k) { $target.find("select").append($("", { value: v.value }).html(v.label)); } }); } 

工作示例： https ： //jsfiddle.net/Twisty/1L152xyj/8/

Answer 2

  var rowCount = 1; function cloneRow(self) { if(rowCount==7){ $(".glyphicon-plus").attr("disabled", true); return; } else{ var a = $("table#table").find("tbody"); var b = a.find("tr:first"); $trLast1 = a.find("tr:last"); $trNew = b.clone(); $trNew.find("button#dltbtn").remove().end(); $trNew.find("td:first").append(''); $trLast1.after($trNew); rowCount = $('table#table tr:last').index() + 1; manage_opns(); } } $(document).on('change', '.selectedItem', function(e, el){ manage_opns(); }); function manage_opns(){ $("select.selectedItem option").attr('disabled',false); $("select.selectedItem").each(function(i, el){ var cur_val = $(el).val(); if(cur_val != ''){ $("select.selectedItem option[value='"+cur_val+"']").attr('disabled',true); $(el).find("option[value='"+cur_val+"']").attr('disabled',false); } }); } function deleteRow(a) { $(a).closest("tr").remove(); rowCount = $('table#table tr:last').index() + 1; if(rowCount <= 7){ $(".glyphicon-plus").attr("disabled", false); } manage_opns(); } 

HTML代码

 
 
 
 
 
 
  Entity Name Tag Mac Tag Number Sub Category Department Name In Time Out Time  
 
  
 
 
  

现在您可以看到function