The "JavaScript" drop-down list in select passes multiple values in value, takes out its option display value, and applies this as a navigation

For a drop-down list select, it is well known that the value is the value in the selected option, but what if you need to take out the display value of each option? While it's not necessary to take the option's display value, if you do need the display value sometimes, what does the JavaScript script do? Also, what if you want to pass multiple values at value? What's the change?

First, remove the display value of option

You can pass the entire select past script first, assuming that the pass-through form parameter is obj, and then use obj.options[obj.selectedindex].innerhtml to remove the display value of option

Obj.selectedindex indicates the location of the option selected in the Select Now

You can switch to 0,1,2,3 ... Means 0,1,2,3 ... Item

Second, drop-down list select in value to pass multiple values

In this case, you need to use the Split function in your script to set the delimiter in value.

Split returns an array,

Iterate over this array and take out the value passed in the past.

For example, illustrate the above two items, such as the following code:

HTML Layout:

<select onchange= "Selecttest (This)" >    <option value= "Hello," > Hello </option>    <option Value= "aaa,2,3" >aaa</option>    <option value= "Chinese not asked, 4,5" > Chinese no problem </option>    <option Value= "Cc,c,c" >aaa</option></select>

JavaScript script:

function Selecttest (obj) {alert (Chinese: "+obj.options[obj.selectedindex].innerhtml" in option);p aramarray= Obj.value.split (","); A=paramarray[0];b=paramarray[1];c=paramarray[2];alert (A + "" +b+c);}

The results of the operation are as follows:

You can see that whenever the value of the drop-down list changes, that is, the user selects one of them, then the script will be triggered, the script first pops up the option display value, and then pops up the value of each value,

Three, drop-down list select navigation Bar

As shown in. In fact, using the onchange function of the following menu select can also do some navigation bar, put an address in value, in the script is a window.location.href function, set onchange trigger, you can complete, such as the following code:

HTML Layout:

<select onchange= "Selecthref (This)" >    <option value= "http://www.1.com" >1</option>    < Option value= "http://www.2.com" >2</option>    <option value= "http://www.3.com" >3</option>    <option value= "http://www.4.com" >4</option></select>    <select onchange= "Selecthref ( This) ">    <option value=" http://www.5.com ">5</option>    <option value=" http://www.6.com " >6</option>    <option value= "http://www.7.com" >7</option>    <option value= "/http/ Www.8.com ">8</option></select>

JavaScript script:

function Selecthref (obj) {window.location.href=obj.value+ "";}

A lot of old-fashioned IE6 Web page is to use this to complete the navigation bar, this realization, than the "CSS" black humor, compatible with IE6 's pure original ecological portal (click Open link) mentioned the navigation bar is much simpler, of course, is more than bootstrap good writing, and the use of strong. Some people may feel too ugly, but the drop-down list that the next triangle style is fixed by the system browser, can not be modified with CSS, I in the "CSS" flat is a paper tiger, see how to abandon the front-end frame in the IE6 flattening "(click Open link) has been mentioned. The code is simple and the Web page gorgeous is not compatible, how to write both sexy and plump code, is our program ape has been the pursuit of ...

The "JavaScript" drop-down list in select passes multiple values in value, takes out its option display value, and applies this as a navigation