Question

161

How to set values of multiple select using JavaScript

rated 0 times [ 164] [ 3] / answers: 1 / hits: 18841 / 5 Years ago, wed, april 3, 2019, 12:00:00

To set data of an <input> element using JavaScript, we assign the value and name of that element like this:

var form = document.createElement(form);

var element = document.createElement(input); 

element.value=value;

element.name=name;

In the case of a <select> where the multiple attribute is present, how do I set the value of that select element? For instance, how would I set the value of the myselect element below:

<form method=post action=/post/ name=myform>

  <select multiple name=myselect id=myselect>

    <option value=1>option1</option>

    <option value=2>option2</option>

        ...

I tried to set the value by doing this myselect.value=[1,2] however it does not work. After selecting option1 and option2 I expected that it returns [1,2], but it just returns 1.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

havenkamis

Add To Favorites

Follow

Total Points: 172

Total Questions: 93

Total Answers: 103

Location: Wales

Member since Mon, May 17, 2021

3 Years ago

answered 5 Years ago kieraelsies · Accepted Answer

To programmatically set multiple value options on a multi-select, you need to manually add selected attributes to the <option> elements that you want to select.

One approach to this is as follows:

const select = document.getElementById('myselect')

const selectValues = [1, 2];



/* Iterate options of select element */

for (const option of document.querySelectorAll('#myselect option')) {



  /* Parse value to integer */

  const value = Number.parseInt(option.value);



  /* If option value contained in values, set selected attribute */

  if (selectValues.indexOf(value) !== -1) {

    option.setAttribute('selected', 'selected');

  }

  /* Otherwise ensure no selected attribute on option */

  else {

    option.removeAttribute('selected');

  }

}

<select multiple name=myselect id=myselect>

  <option value=1>option1</option>

  <option value=2>option2</option>

  <option value=3>option3</option>

  <option value=4>option4</option>

</select>