Send multiple values from select dropdown to text box using getElementById

Question

I have been trying to push array values from multiple select dropdown into text box on clicking "Add" using getElementById

<!DOCTYPE html>
<html>
<body>
 TextName: <input type="text" id="txtName" readonly="readonly" />
 Name:<select multiple="" name="ddlNames[]" id="ddlNames">
<option value="Mudassar Khan">Mudassar Khan</option>
<option value="John Hammond">John Hammond</option>
<option value="Mike Stanley">Mike Stanley</option>
</select>
<button onclick="SetName()">Add</button>

<script>
function SetName() {
        var txtName = document.getElementById("txtName");
    txtName.value = document.getElementById("ddlNames[]").value;
}
</script>
</body>
</html>

The above code outputs only the first selected option to the textbox but not all the selected options.Any suggestions on what I am doing wrong? Or what I can change?

This should show you how to get all selected options ► [how to get multiple selected values and items from listbox using javascript](http://stackoverflow.com/questions/12775912/how-to-get-multiple-selected-values-and-items-from-listbox-using-javascript) — Nope, Feb 27 '17 at 09:40
Possible duplicate of [How to get all selected values of a multiple select box using JavaScript?](http://stackoverflow.com/questions/5866169/how-to-get-all-selected-values-of-a-multiple-select-box-using-javascript) — Janar, Feb 27 '17 at 09:42

score 0 · Answer 1 · answered Feb 27 '17 at 09:42

0

the id is ddlNames and not ddlNames[]. Change to the following;

function SetName() {
      var txtName = document.getElementById("txtName");
      txtName.value = document.getElementById("ddlNames").value;
}

answered Feb 27 '17 at 09:42

WillyMilimo

447
3
12

Vladu Ionut · Accepted Answer · 2017-02-27T10:03:03.450

Solution 1

To get all the selected options you can iterate through all options and then you can filter only the selected one. Take a look on the below snippet.

 Array.prototype.filter.call( document.getElementById("ddlNames").options, el => el.selected).map(el => el.value).join(",")

<!DOCTYPE html>
<html>

<body>
  TextName:
  <input type="text" id="txtName" readonly="readonly" /> Name:
  <select multiple="" name="ddlNames[]" id="ddlNames">
    <option value="Mudassar Khan">Mudassar Khan</option>
    <option value="John Hammond">John Hammond</option>
    <option value="Mike Stanley">Mike Stanley</option>
  </select>
  <button onclick="SetName()">Add</button>

  <script>
    function SetName() {
      var txtName = document.getElementById("txtName");
      txtName.value = Array.prototype.filter.call( document.getElementById("ddlNames").options, el => el.selected).map(el => el.value).join(",");
    }
  </script>
</body>

</html>

Solution 2

You can use querySelectorAll to get only selected options

<!DOCTYPE html>
<html>

<body>
  TextName:
  <input type="text" id="txtName" readonly="readonly" /> Name:
  <select multiple="" name="ddlNames[]" id="ddlNames">
    <option value="Mudassar Khan">Mudassar Khan</option>
    <option value="John Hammond">John Hammond</option>
    <option value="Mike Stanley">Mike Stanley</option>
  </select>
  <button onclick="SetName()">Add</button>

  <script>
    function SetName() {
      var txtName = document.getElementById("txtName");
      var selected = document.querySelectorAll("#ddlNames option:checked");
      txtName.value = Array.prototype.map.call(selected, el => el.value).join(',');
    }
  </script>
</body>

</html>

welcome , we ca accept the answer --> http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work — Vladu Ionut, Feb 27 '17 at 16:37

score 0 · Answer 3 · answered Feb 27 '17 at 09:47

just add a +
txtName.value += document.getElementById("ddlNames").value;

function SetName() {
    var txtName = document.getElementById("txtName");
    txtName.value += document.getElementById("ddlNames").value;
}

<!DOCTYPE html>
<html>
<body>
 TextName: <input type="text" id="txtName" readonly="readonly" />
 Name:<select multiple="" name="ddlNames" id="ddlNames">
<option value="Mudassar Khan">Mudassar Khan</option>
<option value="John Hammond">John Hammond</option>
<option value="Mike Stanley">Mike Stanley</option>
</select>
<button onclick="SetName()">Add</button>

</body>
</html>

score 0 · Answer 4 · answered Feb 27 '17 at 09:49

You can use querySelectorAll instead to query all checked option DOM, then get the value of each element by a for-loop.

For example:

function SetName() {
        var txtName = document.getElementById("txtName");
        var selected = document.querySelectorAll("#ddlNames option:checked");
        var values = [];
        for(var i=0; i<selected.length; i++){
                    values.push(selected[i].value);
                }
    txtName.value = values.join(',');
}

Send multiple values from select dropdown to text box using getElementById

4 Answers4