美文网首页
select标签选择option跳转到对应的链接

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

作者: Ruby君 | 来源:发表于2017-06-29 11:51 被阅读16次

    首先按照通常的思路,在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;
    }
    

    大功告成,以上。

    相关文章

      网友评论

          本文标题:select标签选择option跳转到对应的链接

          本文链接:https://www.haomeiwen.com/subject/nvjmcxtx.html