【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扁平化》(点击打开链接)中已经提到过了。代码简单与网页华丽两者不可以兼容,如何写出既性感又丰满的代码,是我们程序猿一直的追求……

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。