Javascript set selected option and save user selection and all options
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;
-
Related Reading
- Javascript multidimensional array (create, add and r
- Javascript get current url, domain from url, relativ
- Javascript convert hex to decimal, binary to hex, oc
- Remove html element javascript by their parent or cl
- Javascript get all input elements in form and all im
- C# Richtextbox change font color, add and foreach li
- Javascript create element(div,li,img,span) dynamical
- How to convert excel to pdf(6 examples, with selecti
- Mod operator and rounding off numbers in javascript
- C# Windows Forms foreach controls, with Textbox and
- Javascript img src path changes, with without id (ge
- Javascript show hide div onclick, onclick radio butt