0
votes

Puis-je ajouter le même élément document.createElement sur un élément différent?

J'ai 2 listes déroulantes pour avoir les mêmes éléments.

Ce code ne fonctionne pas, lorsque je crée un seul élément et que je tente de l'attribuer à deux éléments parents différents.

function addAssignee() {
    let dropDown1 = document.getElementById("bugOwner");
    let dropDown2 = document.getElementById("bugAssignee");

    document.getElementById("bugOwner").options.length = 0;
    document.getElementById("bugAssignee").options.length = 0;

    let localData = localStorage.getItem("users");
    let jsonObj = JSON.parse(localData);

    for (i in jsonObj.records) {
        let option1 = document.createElement("OPTION");
        let option2 = document.createElement("OPTION");
        option1.innerHTML = jsonObj.records[i].name;
        option1.value = jsonObj.records[i].unique;
        option2.innerHTML = jsonObj.records[i].name;
        option2.value = jsonObj.records[i].unique;
        dropDown1.options.add(option1);
        dropDown2.options.add(option2);
    }
}

Output:

Ce code fonctionne, lorsque je crée deux éléments, leur attribue des valeurs et les ajoute au élément parent.

function addAssignee() {
    let dropDown1 = document.getElementById("bugOwner");
    let dropDown2 = document.getElementById("bugAssignee");

    document.getElementById("bugOwner").options.length = 0;
    document.getElementById("bugAssignee").options.length = 0;

    let localData = localStorage.getItem("users");
    let jsonObj = JSON.parse(localData);

    for (i in jsonObj.records) {
       let option = document.createElement("OPTION");
        option.innerHTML = jsonObj.records[i].name;
        option.value = jsonObj.records[i].unique;
        dropDown1.options.add(option);
        dropDown2.options.add(option);
    }
}

Résultat:

javascript debugging

2 commentaires

pouvez-vous partager le code html?

Votre nom

3 Réponses :

2
votes

Vous pouvez toujours faire let option2 = option1.clone () ou simplement cloner au moment de l'ajout: dropDown2.options.add (option.clone ())

1 commentaires

Réglez profond sur vrai. dropDown2.options.add (option.clone (vrai))

1
votes

Le modèle HTML DOM est construit comme une arborescence d'objets. Chaque DOM peut avoir plusieurs enfants mais un et un seul parent . Donc, même s'il n'y a pas d'erreur JavaScript, vous ne pouvez pas ajouter le même DOM à différents parents.

0 commentaires

0
votes

Vous ne pouvez pas configurer les enfants pour avoir plusieurs parents. Alors créez une option puis clonez-la en utilisant cloneNode , true est pour la copie profonde.

Pour cette démo, localStorage ne fonctionnera pas, donc coder l'option De plus, s'il s'agit d'un tableau, n'utilisez pas for ..in pour faire une boucle dessus. Utilisez des méthodes natives for en boucle ou en tableau comme forEach

<label for="bugOwner">Your Name</label>
<select class="form-control" id="bugOwner" name="bugOwner">
  <option value="#">TODO Later</option>
</select>

<label for="bugAssignee">Bug Assignee</label>
<select class="form-control" id="bugAssignee" name="bugAssignee">
  <option value="#">TODO Later</option>
</select>

let jsonObj = {
  records: [{
    name: 'A',
    unique: '1'
  }, {
    name: 'B',
    unique: '10'
  }]
}


function addAssignee() {
  let dropDown1 = document.getElementById("bugOwner");
  let dropDown2 = document.getElementById("bugAssignee");

  document.getElementById("bugOwner").options.length = 0;
  document.getElementById("bugAssignee").options.length = 0;

  let options = ''
  for (let i = 0; i < jsonObj.records.length; i++) {
    let option = document.createElement("option");
    option.text = jsonObj.records[i].name;
    option.value = jsonObj.records[i].unique;
    let opt2 = option.cloneNode(true);
    dropDown1.options.add(option);
    dropDown2.options.add(opt2);
  }
}

addAssignee()

0 commentaires