Javascript set selected option and save user selection and all options

Lionsure 2020-06-04 Original by the website

The select drop-down list box is generally selected by user, but sometimes it needs to be selected with javascript, for example, when restoring the item selected by user. In most cases, the items selected by user are usually restored in the background, but in order to save server resources, sometimes they are also restored at the client with javascript.

In addition to using javascript to restore the user's selected value, sometimes all the options of select are got. Depending on the needs, you may find a value from all the options, or you may temporarily save all the options to the client, so that we can restore the lost select option after the user clicks a certain applied button.

 

I. Javascript set selected option

1. Set selected option with value

The method of javascript set selected option is exactly the same as the background. The html code is as follows:

<select id="selecteId">
              <option value="0">Please select</option>
              <option value="1">Option 1</option>
              <option value="2">Option 2</option>
       </select>

 

Javascript code:

var selId = document.getElementById("selecteId");
       selId.value = "2";//Set the selected option to 2, which is Option 2

 

2. Set selected option with option serial number

selId.options[2].selected = true;//Set the third item to the current option, i.e. Option 2

 

3. Set selected option with option index

selId.selectedIndex = 2;//Set the third item to the current option, that is, Option 2

 

4. Set selected option with option's id or namedItem

When the select option has an id, you can use id or namedItem to set the current option. The html code is as follows:

<select id="selecteId">
              <option id="0">Please select</option>
              <option id="1">Option 1</option>
              <option id="2">Option 2</option>
       </select>

 

Javascript code (set the third item to the current option, i.e. option 2):

document.getElementById("2").selected = true;

Or

selId.options.namedItem("2").selected = true;

 

 

II. The three cases of traversal all the options in select

1. Javascript select find option by value

Taking the above select as an example, the javascript code is as follows:

var selId = document.getElementById("selecteId");
       var items = selId.options;//Javascript get select all option

for (var i = 0; i < items.length; i++) {
              if (items[i].value == "1") {
                     alert(items[i].text);
              }
       }

 

2. Temporarily save all options of select

When the user clicks the button to upload the file without refreshing, after the upload is completed, all the options of selection are lost. At this time, all the options are temporarily saved in the client in order to restore the data before the selection upload, javascript code show as below:

Before clicking the button, temporarily save all select option codes:

var selId = document.getElementById("selecteId");
       var items = selId.innerHTML;

 

After clicking the button, restore all select option codes:

selId.innerHTML = items;

The above code is to temporarily save the internal text of select (that is, innerHTML), which is simple and effective; after restoration, you can also restore the user's selection by selId.value = "select value".

 

3. Javascript save user selection in select option

Save the item selected by user to a variable, the code is:

var index = selId.selectedIndex; //Save index of option(Javascript get selected option)

 

Set the saved user option as the current option, the code is:

selId.selectedIndex = index;