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

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

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>

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: