【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扁平化》(点击打开链接)中已经提到过了。代码简单与网页华丽两者不可以兼容,如何写出既性感又丰满的代码,是我们程序猿一直的追求……
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。