javascript - 使用javascript输入文本

Question

请帮助我。我的问题是，当我单击选项=“Prestataire”时，它会向我显示2个值为“Prestataire”的输入文本，但是如果我进行更改并单击选项=“Stagiare”，他会向我显示前2个输入，其中包含新的输入文本“斯塔吉亚雷”值。我的目标是当我单击“Prestataire”时有两个值为“Prestataire”的输入文本，当我单击“Stagiare”时，它会删除这两个输入并创建一个值为“Stagiare”的新输入。先感谢您。

document.getElementById('contrat').onchange = function() {
  if (this.value == 'Prestataire') {
    var new_input = document.createElement('input');
    var new_input1 = document.createElement('input');
    new_input.type = "text";
    new_input.id = 'id_input';
    new_input.value = this.value;
    new_input1.type = "text";
    new_input1.id = 'id_input1';
    new_input1.value = this.value;
    document.getElementById('champ2').appendChild(new_input);
    document.getElementById('champ3').appendChild(new_input1);
  } else if (this.value == 'Stagiaire') {
    var new_input3 = document.createElement('input');
    new_input3.type = "text";
    new_input3.id = 'id_input';
    new_input3.value = this.value;
    document.getElementById('champ2').appendChild(new_input3);;
  }
};

<div id="conteneur">
  <input type="text" />
  <div id="champ1">
    <label for="contrat">Contrat *:</label>
    <select id="contrat" name="contrat">
      <option value="CDI" selected="selected">CDI</option>
      <option value="CDD">CDD</option>
      <option value="Interimaire">Interimaire</option>
      <option value="Prestataire">Prestataire</option>
      <option value="Auxiliaire">Auxiliaire saisonnier</option>
      <option value="Stagiaire">Stagiaire</option>
      <option value="Alternant">Alternant</option>
    </select>
  </div>
  <div id="champ2"></div>
  <div id="champ3"></div>
</div>

Answer 1

在将子项附加到 else 部分之前，您需要清空 ID 为 champ2 和 champ3 的 div。

document.getElementById("contrat").onchange = function() {
  if (this.value == "Prestataire") {
    var new_input = document.createElement("input");
    var new_input1 = document.createElement("input");
    new_input.type = "text";
    new_input.id = "id_input";
    new_input.value = this.value;
    new_input1.type = "text";
    new_input1.id = "id_input1";
    new_input1.value = this.value;
    document.getElementById("champ2").appendChild(new_input);
    document.getElementById("champ3").appendChild(new_input1);
  } else if (this.value == "Stagiaire") {
    var new_input3 = document.createElement("input");
    new_input3.type = "text";
    new_input3.id = "id_input";
    new_input3.value = this.value;
    document.getElementById("champ2").innerHTML = "";
    document.getElementById("champ3").innerHTML = "";
    document.getElementById("champ2").appendChild(new_input3);
  }
};

<div id="conteneur">
  <input type="text" />
  <div id="champ1">
    <label for="contrat">Contrat *:</label>
    <select id="contrat" name="contrat">
      <option value="CDI" selected="selected">CDI</option>
      <option value="CDD">CDD</option>
      <option value="Interimaire">Interimaire</option>
      <option value="Prestataire">Prestataire</option>
      <option value="Auxiliaire">Auxiliaire saisonnier</option>
      <option value="Stagiaire">Stagiaire</option>
      <option value="Alternant">Alternant</option>
    </select>
  </div>
  <div id="champ2"></div>
  <div id="champ3"></div>
</div>