还是以搜狗主页上的部分为例,下拉框及其带超链的写法代码如下:
1 2 3 4 5 6 7 8 9 10 | <html> <body> <select onchange="window.open(this.value)"> <option value="https://news.sogou.com/">新闻</option> <option value="http://map.sogou.com/?p=40031000#c=11590585.147627011,3560345.413968106,14">地图</option> <option value='https://gouwu.sogou.com/?p=40031500'>购物</option> </select> </body> </html> |
上面的代码中有两个知识点:
1,目标链接地址是写在value里面的;
2,实现跳转的方式是select里面的onChange属性。
上面是最简单的写法,也可以用js写,代码就复杂一些,如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <html> <body> <select onchange="s_click(this)"> <option value="https://news.sogou.com/">新闻</option> <option value="http://map.sogou.com/?p=40031000#c=11590585.147627011,3560345.413968106,14">地图</option> <option value='https://gouwu.sogou.com/?p=40031500'>购物</option> </select> <script type="text/javascript"> function s_click(obj) { var num = 0; for (var i = 0; i < obj.options.length; i++) { if (obj.options[i].selected == true) { num=1; } } if (num == 1) { var url = obj.options[obj.selectedIndex].value; window.open(url); } } </script> </body> </html> |
上面这个代码的js就实现了两个功能,1,对是否选中进行判断。2,打开选中项的链接地址。
其实上面这段js代码写的还是复杂了,更加简洁的写法如下,这样写就跟直接写在属性里面没有什么区别了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <html> <body> <select onchange="s_click(this)"> <option value="https://news.sogou.com/">新闻</option> <option value="http://map.sogou.com/?p=40031000#c=11590585.147627011,3560345.413968106,14">地图</option> <option value='https://gouwu.sogou.com/?p=40031500'>购物</option> </select> <script type="text/javascript"> function s_click(obj) { var url = obj.options[obj.selectedIndex].value; window.open(url); } </script> </body> </html> |