Parse the select drop-down list using Javascript

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;}