老鼠工作室博客

问题1：为什么要模拟下拉框？

1，浏览器自带的 下拉框样式不好看。 传统的  下拉框因為样式丑陋且无法随性更改样式而遭到了我的鄙夷，相信很多人都有此种观点。

2，并且在6下，下拉框的优先顺序大於层，经常导致下拉框显示在层的上面。但是自从有了 ，这些问题便不再是问题。最近正好在改版一个网站，要修改下拉框的样式，正好看到  已经製作了这麼一个很有用的插件，下面我就教大家怎麼用  製作一个模拟下拉框，从而实现对  下拉框样式的定製。

OK，明白这个问题后，我们就开始用jQuery制作模拟下拉框。

用jQuery 制作模拟下拉框思路：

通过已知的下拉框，把里面的数据循环出来，放到另一个的列表里，另一个就是简单的弹出层而已。

通过可以 获取下拉框的选中的值和文本 。

先看这段代码：

<script type="text/javascript">
/*
Dev by CssRain.cn
Test in IE6,IE7,Firefox3,Chrome
感謝 CssRain的這段插件代碼
*/
jQuery.fn.CRselectBox = jQuery.fn.sBox = function(options){
    options = $.extend({
        animated : false
    },options);
    var _self = this;
    /*構建結構*/
    var _parent = _self.parent();
    var wrapHtml = '<div class="CRselectBox"></div>';
    var $wrapHtml = $(wrapHtml).appendTo(_parent);
    var selectedOptionValue = _self.find("option:selected").attr("value");
    var selectedOptionTxt = _self.find("option:selected").text();
    var name = _self.attr("name");
    var id = _self.attr("id");
    var inputHtml = '<input type="hidden" value="'+selectedOptionValue+'" name="'+name+'" id="'+id+'"/>';
    $(inputHtml).appendTo($wrapHtml);
    var inputTxtHtml = '<input type="hidden" value="'+selectedOptionTxt+'" name="'+name+'_CRtext" id="'+id+'_CRtext"/>';
    $(inputTxtHtml).appendTo($wrapHtml);
    var aHtml = '<a class="CRselectValue" href="#">'+selectedOptionTxt+'</a>';
    $(aHtml).appendTo($wrapHtml);
    var ulHtml = '<ul class="CRselectBoxOptions"></ul>';
    var $ulHtml = $(ulHtml).appendTo($wrapHtml);
    var liHtml = "";
    _self.find("option").each(function(){
        if($(this).attr("selected")){
            liHtml += '<li class="CRselectBoxItem"><a href="#" class="selected" rel="'+$(this).attr("value")+'">'+$(this).text()+'</a></li>';
        }else{
            liHtml += '<li class="CRselectBoxItem"><a href="#" rel="'+$(this).attr("value")+'">'+$(this).text()+'</a></li>';
        }
    });
    $(liHtml).appendTo($ulHtml);
    /*添加效果*/
    $( $wrapHtml, _parent).hover(function(){
        $(this).addClass("CRselectBoxHover");
    },function(){
        $(this).removeClass("CRselectBoxHover");
    });
    $(".CRselectValue",$wrapHtml).click(function(){
        $(this).blur();    
        if( $(".CRselectBoxOptions",$wrapHtml).is(":hidden") ){
            if(options.animated){
                $(".CRselectBoxOptions").slideUp("fast");
                $(".CRselectBoxOptions",$wrapHtml).slideDown("fast");
            }else{
                $(".CRselectBoxOptions").hide();
                $(".CRselectBoxOptions",$wrapHtml).show();
            }
        }
        return false;
    });
    $(".CRselectBoxItem a",$wrapHtml).click(function(){
        $(this).blur();
        var value = $(this).attr("rel");
        var txt = $(this).text();
        $("#"+id).val(value);
        $("#"+id+"_CRtext").val(txt);
        $(".CRselectValue",$wrapHtml).text(txt);
        $(".CRselectBoxItem a",$wrapHtml).removeClass("selected");
        $(this).addClass("selected");
        if(options.animated){
            $(".CRselectBoxOptions",$wrapHtml).slideUp("fast");
        }else{
            $(".CRselectBoxOptions",$wrapHtml).hide();
        }
        return false;
    });
    $(document).click(function(event){
        if( $(event.target).attr("class") != "CRselectBox" ){
            if(options.animated){
            $(".CRselectBoxOptions",$wrapHtml).slideUp("fast");
            }else{
                $(".CRselectBoxOptions",$wrapHtml).hide();
            }
        }
    });
    _self.remove();
    return _self;
}
 
})
</script>

当然既然是  实现的，自然别忘了载入  的库哦！

至於怎麼用呢，看下面这段代码：

<script type="text/javascript">
$(function(){
    $("#abc").CRselectBox();      //#abc 为你的下拉框select的ID
</script>

只要给你的下拉框  一个  值即可，其餘的就交给上述的  插件了。

部分自行定义：

.CRselectBox {}
.CRselectBoxHover {}
.CRselectBox a.CRselectValue {}
.CRselectBoxOptions {}
.CRselectBoxOptions a{}
.CRselectBoxOptions a:hover{}
.CRselectBoxOptions a.selected{}
/* 解决点击放大出现虚线框，从而导致滚动条的问题  */
.CRselectBox a {
    outline: none;
    text-decoration:none;
}
.CRselectBox a:focus {
    outline: none;
    text-decoration:none;
}

源文件下载：jqueryCRselectbox