Do you know how to operate the select drop-down list in Javascript? Here we will share with you. I believe this article will surely help you gain some benefits.
Select drop-down list for Javascript operations
The select drop-down table for javascript operations, including reading select content, sequence number, selection value, adding option content, modifying option content, and changing the option order.
View the overall effect: select drop-down list for javascript operations
1. First, access the select option. select defines the set of options, which can be accessed through the Element Set combination.
Example:
- <Selectidselectid = "forasp_cn" name = "forasp_cn">
- <Optionvalueoptionvalue = "http://www.forasp.cn/" selected>
- Website of website production Learning Network </opiton>
- <Optionvalueoptionvalue = "http://www.forasp.cn/yule/">
- Website production Learning Network entertainment website </opiton>
- <Optionvalueoptionvalue = "http://www.forasp.cn/tool/">
- Website creation learning network Tool website </opiton>
- </Select>
The js Code is as follows:
- Varforaspobj = document. getElementById ("forasp_cn ")
- Varoption_num = foraspobj. options. length;
- // Obtain the number of options. Currently, 3 is output.
- Obtain the select option in Dom and obtain the displayed text value and value.
- Varoption_text1 = foraspobj. options [0]. firstChild. nodeValue;
- // Output "website production Learning Network URL"
- Varoption_value1 = foraspobj. options [0]. getAttribute ("value ");
- // Output "http://www.forasp.cn /"
- Obtain the select option display text and value values under Bom.
- Varoption_text1 = foraspobj. option [0]. text; // output is the same as above
- Varoption_text1 = foraspobj. option [0]. value; // output is the same as above
2. Obtain the text and value values of the currently selected option under select. select also has a special feature selectedIndex, which is the index of the currently selected option.
- Alert (foraspobj. selectedIndex); // output 0
- For (I = 0; I <foraspobj. options. length; I ++)
- {
- If (foraspobj. options [I]. selected)
- {
- Alert (foraspobj. options [I]. text +
- "\ N" + foraspobj. options [I]. value );
- // Output "website production Learning Network URL press ENTER http://www.forasp.cn /"
- Break;
- }
- }
3. Modify the value and text of the select option.
Assume that you change the first text display value to http://www.forasp.cn/valuevalue
The Dom modification code is as follows:
- Foraspobj. options [0]. firstChild. nodeValue = "http://www.forasp.cn ";
-
- Foraspobj. options [0]. setAttribute ("value", "website production Learning Network ");
The Bom modification code is as follows:
- Foraspobj. options [0]. text = "http://www.forasp.cn ";
- Foraspobj. options [0]. value = "website production Learning Network ";
4. Add options. Use the function to add select option options.
T indicates the text value, and v indicates the value.
- Vartemp_option = document. createElement ("option ");
- // Create a temporary option
- Temp_option.appendChild (document. createTextNode ("new content "));
- // Create a subtext node for option
- Temp_option.setAttribute ("value", "new value added ");
- // Assign a value to opiton
- Foraspobj. appendChild (temp_option)
- // Append option to the parent class
5. Delete the option. Delete the select option. simply use the corresponding option object to be null.
For example, delete the last option.
- if(foraspobj.options.length>0)
- {foraspobj.options[foraspobj.options.length-1]=null;}