给下拉框添加超链的最简单写法和js写法

还是以搜狗主页上的部分为例，下拉框及其带超链的写法代码如下：

1
2
3
4
5
6
7
8
9
10

上面的代码中有两个知识点：

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>

给下拉框添加超链的最简单写法和js写法

发表评论取消回复

微信