select标签选择option跳转到对应的链接

2017-06-29  本文已影响16人  Ruby君

首先按照通常的思路,在option中添加a标签,发现没有作用,页面不会跳转。
然后考虑使用JavaScript进行模拟,代码如下:
HTML:

<select>
    <option value="#">请选择</option>
    <option value="https://zhihu.com">知乎</option>
    <option value="https://tieba.baidu.com">贴吧</option>
    <option value="https://weibo.com">微博</option>
</select>

JavaScript

var select = document.querySelector('select');
select.onchange = function(){
    window.location=this.value;
}

大功告成,以上。

上一篇 下一篇

猜你喜欢

热点阅读