Question

我有几个文本字段。我想将输入字段中的值放入下拉菜单中。如果文本被更改，我希望更新下拉菜单。这是我得到的最接近的。

＆＃13;

function insertLab1() {
    var x = document.getElementById("insLabels");
    var option1 = document.createElement("option");
    var label1 = document.getElementById("lab1").value;
    option1.text = label1;
    x.add(option1, x[0]);
    if (label1 != option1.text){x.remove(x.options[0]);}  
}

function insertLab2() {
    var x = document.getElementById("insLabels");
    var option2 = document.createElement("option");
    var label2 = document.getElementById("lab2").value;
    option2.text = label2;
    x.add(option2, x[1]);
    if (label2 != option2.text){x.remove(option2);}    
}

＆＃13;

Label 1 <input type="text" id="lab1" onchange="insertLab1()"><br>
Label 2 <input type="text" id="lab2" onchange="insertLab2()"><br><br>

Choose Label<br>
<select id="insLabels">
</select>

＆＃13;

标签确实显示在选项下拉列表中，但在标签区域中更改文本时，下拉值不会更改。我在if语句中尝试了多种组合，但似乎没有什么对我有用。

对我做错了什么的想法？非常感谢您提供的任何帮助！

Answer 1

您需要一种方法来获取lab1和lab2的现有选项（如果它存在），如果它不存在（第一次），那么您创建并添加它。

如果确实存在，则只更新值，而不是像当前那样创建新的选项元素。

在下面的示例中，您可以看到我使用此代码执行此操作。

  var option1 = document.getElementById("lab1Option");
  if (option1 == null) {
    option1 = document.createElement("option");
    option1.id = "lab1Option";
  }

function insertLab1() {
  var x = document.getElementById("insLabels");
  var option1 = document.getElementById("lab1Option");
  if (option1 == null) {
    option1 = document.createElement("option");
    option1.id = "lab1Option";
  }
  var label1 = document.getElementById("lab1").value;
  option1.text = label1;
  x.add(option1, x[0]);
  if (label1 != option1.text) {
    x.remove(x.options[0]);
  }
}

function insertLab2() {
  var x = document.getElementById("insLabels");
  var option2 = document.getElementById("lab2Option");
  if (option2 == null) {
    option2 = document.createElement("option");
    option2.id = "lab2Option";
  }
  var label2 = document.getElementById("lab2").value;
  option2.text = label2;
  x.add(option2, x[1]);
  if (label2 != option2.text) {
    x.remove(option2);
  }
}

Label 1 <input type="text" id="lab1" onchange="insertLab1()"><br> Label 2 <input type="text" id="lab2" onchange="insertLab2()"><br><br> Choose Label<br>
<select id="insLabels">
</select>

从输入字段获取文本并插入下拉列表

1 个答案: