【JavaScript】下拉列表select中在value传递多个值，取出其option显示值，并应用此作为导航

对于下拉列表select，众所周知，其值就是选中的option中的value值，可是如果需要取出每一个option的显示值，那又如何做呢？虽然没什么必要取出option的显示值，但是如果有时候确实需要这个显示值，在javascript的脚本做点什么呢？另外，如果要再value处传递多个值呢？那又改如何呢？

一、取出option的显示值

你可以先传递整个select过去脚本，假设传过去的形式参数是obj，然后利用obj.options[obj.selectedIndex].innerHTML来取出option的显示值

obj.selectedIndex表示现在select中被选中的option的位置

你可以换成0,1,2,3……表示第0,1,2,3……项

二、下拉列表select中在value传递多个值

此时则需要在脚本中利用到split函数，在value中设置好分隔符，

split返回的是一个数组，

再遍历此数组，取出传递过去的value值。

举个例子，说明上面两个项，比如如下代码：

HTML布局：

<select onchange="selectTest(this)">
    <option value="你好,1,2">你好</option>
    <option value="aaa,2,3">aaa</option>
    <option value="中文没有问,4,5" >中文没有问题</option>
    <option value="cc,c,c">aaa</option>
</select>

JavaScript脚本：

function selectTest(obj){
	alert("Option中的中文："+obj.options[obj.selectedIndex].innerHTML);
	paramArray=obj.value.split(",");
	a=paramArray[0];
	b=paramArray[1];
	c=paramArray[2];
	alert(a+""+b+c);
	}

运行结果如下：

可以看到，每当下拉列表的值改变，也就是用户选择其中一项，那么就会触发脚本，脚本首先弹出option的显示值，再弹出value中各个数值，

三、下拉列表select导航栏

如上图所示。其实利用下列菜单select的onchange函数还可以做一些导航栏，在value中放一个地址，在脚本放是一个window.location.href函数，设置onchange触发，则可以完成，比如如下代码：

HTML布局：

<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脚本：

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

旧式的很多IE6网页就是利用这个完成导航栏的，这样实现，比《【CSS】黑色幽默，兼容IE6的纯原生态的门户网站》（点击打开链接）提到的导航栏简单多，当然更是要比BootStrap好写，兼用性强。可能会有人觉得太丑，但是下拉列表那个下三角形样式是系统浏览器固定的，无法用CSS修改，我在《【CSS】扁平化都是纸老虎，看怎么抛弃前端框架在IE6扁平化》（点击打开链接）中已经提到过了。代码简单与网页华丽两者不可以兼容，如何写出既性感又丰满的代码，是我们程序猿一直的追求……