Comment puis-je supprimer et append de la valeur au menu déroulant dynamic créé à l’aide de JQuery?

C’est un peu difficile de déterminer ce que vous essayez de faire. J’ai essayé ici.

Exemple: 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")); }); }); 

J’espère que cela pourra aider.

Mettre à jour

Je pense que cela pourrait être plus proche de ce que vous décriviez. S’il vous plaît commenter et laissez-moi savoir.

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

Extrait de code 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")); }); }); 

Cela clone tout mais met à jour les atsortingbuts id pour s’assurer qu’ils sont uniques. Il clone également la propriété sélectionnée de l’option.

Mise à jour 2

Si vous souhaitez désactiver une option, lorsque la ligne est clonée, vous pouvez procéder comme suit:

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

Exemple: https://jsfiddle.net/Twisty/1L152xyj/7/

Mise à jour 3

Si vous ne souhaitez pas que cette option apparaisse dans les autres éléments de select et qu’elle soit également supprimée chaque fois que la première sélection est modifiée, vous devez en faire beaucoup plus. Je conseillerais de stocker une liste des options:

 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" }]; 

De cette façon, vous pouvez append, supprimer ou modifier des options à tout moment. Une simple fonction peut aider avec ceci:

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

Exemple de travail: https://jsfiddle.net/Twisty/1L152xyj/8/

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

Code HTML

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

Maintenant, vous pouvez voir la fonctionnalité