[JavaScript] In the select drop-down list, multiple values are passed in the value, the option display value is taken out, and this is applied as the navigation, selectoption

[JavaScript] In the select drop-down list, multiple values are passed in the value, the option display value is taken out, and this is applied as the navigation, selectoption

For the select drop-down list, we all know that the value is the value of the selected option. But if you need to retrieve the display value of each option, what should we do? Although there is no need to retrieve the option display value, if you do need this display value sometimes, what do you do in javascript scripts? In addition, what if we want to pass multiple values in the value Field? What should we do?

1. Retrieve the display value of option

You can first pass the entire select script, assuming that the passed form parameter is obj, and then use obj. options [obj. selectedIndex]. innerHTML to retrieve the option display value.

Obj. selectedIndex indicates the position of the selected option in the select statement.

You can replace it with 0, 1, 2, 3 ...... The value 0, 1, 2, 3 ...... Item

2. Multiple values are passed in the select statement in the drop-down list.

In this case, you need to use the split function in the script and set the delimiter in the value,

Split returns an array,

Traverse the array to retrieve the value passed in the past.

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

HTML layout:

<Select onchange = "selectTest (this)"> <option value = "Hello, 1, 2"> Hello </option> <option value = "aaa, 2, 3 "> aaa </option> <option value =" no questions in Chinese, 4, 5 "> no questions in Chinese </option> <option value =" cc, c, c "> aaa </option> </select>

JavaScript script:

Function selectTest (obj) {alert ("Chinese in Option:" + obj. options [obj. selectedIndex]. innerHTML); paramArray = obj. value. split (","); a = paramArray [0]; B = paramArray [1]; c = paramArray [2]; alert (a + "" + B + c );}

The running result is as follows:

As you can see, when the value of the drop-down list changes, that is, if you select one of them, the script is triggered. The script first displays the option value, and then the values in the value,

Iii. select navigation bar in the drop-down list

As shown in. In fact, the select onchange function in the following menu can also be used for some navigation bars. Put an address in the value and a window in the script. location. the href function can be used to set the onchange trigger, for example, 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+"";}

Many old-style IE6 web pages use this to complete the navigation bar, which is more effective than [CSS], which is a pure original portal website compatible with IE6 (click to open the link) the navigation bar mentioned here is much simpler and more useful than BootStrap. Some people may think it is too ugly, but the triangle style under the drop-down list is fixed by the System Browser and cannot be modified with CSS. In my "CSS", flattening is a paper tiger, see how to discard the front-end framework as mentioned in IE6 flattening (click to open the link. Simple code is not compatible with the beauty of the Web page. How to write the code that is both sexy and plump is the constant pursuit of our programmers ......