Get text from input field and insert into dropdown list

Question

I have several text fields. I would like to place the values from the input fields into a drop down menu. If the text is changed I would like for the drop down menu to be updated. Here's the closest I have gotten.

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

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>

The labels do show up in the option drop down list but the drop down values will not change when the text is changed in the label areas. I have tried multiple combinations within the if statements but nothing seems to be working for me.

Any thoughts on what I have been doing wrong? Thank you so much for any help you can offer!

Andrew L · Accepted Answer · 2017-10-29 22:18:53Z

1

You need a way to get the existing option for lab1 and lab2 (if it exists) if it does not exist (first time) then you create it and add it.

If it does exist then you update just the value instead of creating a new option element like you are doing currently.

In the example below you can see I do that with this code.

  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>

answered Oct 29, 2017 at 22:18

Andrew L

5,5161 gold badge29 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tina Over a year ago

The example above works like a charm, thank you! I am still trying to tweak mine to get it to do the same, think I am missing something somewhere but will keep trying. :o) Got it! Thank you so very much again!

Andrew L Over a year ago

no problem! if this solved your question, please accept it as the answer, thanks!

Tina Over a year ago

Definitely did resolve the issue, thanks again :o). Learned something else new today... how to accept answer here on stackoverflow. Thanks for bringing that to my attention too.

Collectives™ on Stack Overflow

Get text from input field and insert into dropdown list

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related