网站开发日志: jQuery 下拉选择菜单

下拉选择菜单在网页制作里很常用，我们做网页的或多或少都要用到它。在这篇文章里我将介绍运用纯JavaScript和jQuery两种方法来实现对下拉菜单的选择。通过比较两种不同的方法，你或许会发现运用jQuery library 简化了Javacript的编码。

1. 运用纯Javascript编码实现单选下拉菜单。

<html>  
<head>  
    <title>www.61dh.com站内链接例子</title>  
    <script>  
    function onSelectChange(){  
        var dropdown = document.getElementById("link");  
        var index = dropdown.selectedIndex;  
        var ddVal = dropdown.options[index].value;  
        var ddText = dropdown.options[index].text;            
        if(ddVal != 0) {
          window.location=ddVal
        }             
    }  
    </script>  
</head>  
<body>        
    <h3>61dh站内链接</h3>  
    <select id="link">
       <option value="http://www.61dh.com/playground/game.html">游戏</option>  
       <option value="http://www.61dh.com">主页</option>  
       <option value="http://www.61dh.com/caipiao">彩票</option>  
       <option value="http://www.61dh.com/blog">博客</option>                              
    </select>
    <button onClick="onSelectChange();">选择</button>
</body>  
</html>

2. 运用jQuery Library

<script type="text/javascript" src="/js/jquery.js"></script>  
<script>  
   $(document).ready(function(){
      $('#select').click(function(){
         window.location= $("#link option:selected").val()});          
      });  
</script>

用上面的代码代替方法一里的Javascript。因为这里对onClick事件触发函数的调用被写在Javascript里："$('#select').click(function()"，所以我们可以移除HTML里的对onClick函数调用，然后加上id="select",jQuery用这个id来识别onClick事件发生的对象。

~~<button onClick="onSelectChange();">选择</button>~~ <button id="select">选择</button>

演示：站内下拉菜单链接

标签： Javascript, Jquery

jQuery 下拉选择菜单

0 条评论:

发表评论

指向此帖子的链接:

关于

上一个

jQuery 下拉选择菜单

相关文章:

0 条评论:

发表评论

指向此帖子的链接:

关于

上一个