jQuery模拟下拉框选项制作(附源码)_电脑软硬件应用网_国内最受关注的计算机应用解决中心

首页·电脑学院·电脑故障·操作系统·硬件教程·局域网技术·QQ技巧·网络安全·办公软件· 数据库

导航·设计学院·图像处理·网页设计·软件教程·服务器技术·笔记本·专家装机·网络编程·在线问答

当前位置：电脑软硬件应用网 > 设计学院 > 网络编程 > javascript > 正文

jQuery模拟下拉框选项制作(附源码)

jQuery模拟下拉框选项制作(附源码)

2010-3-9 9:14:21　　文/不详　　出处:电脑软硬件应用网　　

本文使用jquery来制作模拟下拉选项效果，不错的哦。这是普通的下拉框代码：
XML/HTML代码
<select name="abc" id="abc">
    <option value="1">选项一</option>
    <option value="2">选项二</option>
    <option value="3">选项三</option>
    <option value="4">选项四</option>
    <option value="5">选项五</option>
    <option value="6">选项六</option>
</select>
这个是模拟出来的：
XML/HTML代码
<div class="CRselectBox">
    <input type="hidden" value="" name="abc" id="abc"/> 
    <input type="hidden" value="" name="abc_CRtext" id="abc_CRtext"/> 
    <a class="CRselectValue" href="#">选项一</a>
    <ul class="CRselectBoxOptions">
        <li class="CRselectBoxItem"><a href="#" class="selected" rel="1">选项一</a></li>
        <li class="CRselectBoxItem"><a href="#" rel="2">选项二</a></li>
        <li class="CRselectBoxItem"><a href="#" rel="3">选项三</a></li>
        <li class="CRselectBoxItem"><a href="#" rel="4">选项四</a></li>
        <li class="CRselectBoxItem"><a href="#" rel="5">选项五</a></li>
        <li class="CRselectBoxItem"><a href="#" rel="6">选项六</a></li>
    </ul>
</div>
主要就是Jquery代码：
JavaScript代码
$(function(){
    $(".CRselectBox").hover(function(){
        $(this).addClass("CRselectBoxHover");
    },function(){
        $(this).removeClass("CRselectBoxHover");
    });
    $(".CRselectValue").click(function(){
        $(this).blur();
        $(".CRselectBoxOptions").show();
        return false;
    });
    $(".CRselectBoxItem a").click(function(){
        $(this).blur();
        var value = $(this).attr("rel");
        var txt = $(this).text();
        $("#abc").val(value);
        $("#abc_CRtext").val(txt);
        $(".CRselectValue").text(txt);
        $(".CRselectBoxItem a").removeClass("selected");
        $(this).addClass("selected");
        $(".CRselectBoxOptions").hide();
        return false;
    });
    /*点击任何地方关闭层*/
    $(document).click(function(event){
        if( $(event.target).attr("class") != "CRselectBox" ){
            $(".CRselectBoxOptions").hide();
        }
    });

    /*===================Test========================*/
    $("#test").click(function(){
        var value = $("#abc").val();
        var txt = $("#abc_CRtext").val();
        alert( "你本次选择的值和文本分别是：" + value +" , "+txt );
    });
})

上一篇文章： js仿c#sleep暂停的函数功能

下一篇文章： jquery实现无限级联树(结合div+css)

最新热点		最新推荐		相关文章
				js或jquery获取网页控件的offset值的… 验证JS中Object和Function的关系的代… 使用jquery的Dialog出现内存泄露问题… 如何优化jQuery性能的12种方法解析不支持ASP的空间能用JS吗? 关于20个Ajax关键问题的疑问及解答 extjs重新设置按钮button的text的方… 58项经典的JS代码详解总结使用jquery的ajax调用webse… 为jQuery-easyui的tab组件添加右键菜…