jQuery - Est-il possible de changer les options de selectbox pendant le clonage?

Question

Est-il possible de modifier les options selectbox's pendant le clonage?

Je clone un div avec ses enfants intérieurs. Chacun d'eux a un identifiant différent chaque fois qu'ils sont clonés. Le div original contient une boîte de sélection qui obtient ses valeurs de la base de données. Ma question est, est-il possible de modifier les valeurs des boîtes de sélection clonées afin qu'elles ne contiennent pas les valeurs sélectionnées précédentes? Aucune astuce sur comment le faire?

Ce dont j'ai besoin, c'est que les nouvelles boîtes de sélection ne contiennent pas les valeurs des sélections précédentes.

Exemple si dans la boîte de sélection 1 Je choisis 1 (à partir d'une gamme 1-10), la valeur 1 ne sera pas apparaître dans les autres boîtes de sélection

JS

<script> 
document.getElementById('btn_new_service').onclick = duplicate; 
var i =0; 
function duplicate() { 
    var original = document.getElementById('duplicator'); 
    var clone = original.cloneNode(true); // "deep" clone 
    clone.id = "duplicator" + ++i; // there can only be one element with 
    var new_service_ID = 'c_service-'+i; 
    var new_vat_ID = 'vat-'+i; 
    var new_amount_ID = 'amount-'+i; 
    var new_vatamount_ID = 'vat_amount-'+i; 
    clone.querySelector('#c_service').setAttribute('id',new_service_ID); 
    clone.querySelector('#vat').setAttribute('id',new_vat_ID); 
    clone.querySelector('#amount').setAttribute('id',new_amount_ID); 
    clone.querySelector('#vat_amount').setAttribute('id',new_vatamount_ID); 
    original.parentNode.appendChild(clone); 
}; 
</script> 

Answer 1

Vous devrait garder une trace de ce qui est sélectionné et régénérer une sélection à partir de zéro, ce serait plus facile

const selectClass = "mySelect"; 
 
const options = [ 
 
    {id: "c_service", name: "c_service"}, 
 
    {id: "vat", name: "vat"}, 
 
    {id: "amount", name: "amount"}, 
 
    {id: "vat_amount", name: "vat_amount"} 
 
]; 
 

 
var id = 0; 
 

 
function addSelect() { 
 
    // Get selects 
 
    let selects = document.getElementsByClassName(selectClass); 
 
    // Get all selected values 
 
    let selectedOpts = []; 
 
    for (let select of selects) { 
 
    if (select.value != "") { 
 
     selectedOpts.push(select.value); 
 
    } 
 
    } 
 
    // Create the new select 
 
    let select = document.createElement("select"); 
 
    select.setAttribute("class",selectClass); 
 
    select.appendChild(document.createElement("option")); 
 
    // Get available options 
 
    var avOpts = options.filter(o => selectedOpts.indexOf(o.id) == -1); 
 
    // Create the options 
 
    for (var option of avOpts) { 
 
    id++; 
 
    let o = document.createElement("option"); 
 
    o.setAttribute("id", option.id + id); 
 
    o.innerHTML = option.name; 
 
    select.appendChild(o); 
 
    } 
 
    // Add the select to DOM 
 
    document.getElementById("divToInsertInto").appendChild(select); 
 
} 
 

 

 
// add the initial select 
 
addSelect(); 
 
// Attach event 
 
document.getElementById('btn_new_service').onclick = addSelect;

<button id="btn_new_service">clone</button> 
 

 
<div id="divToInsertInto"> 
 
</div>