用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"/> <!-- hidden 用來代替select的值 -->
    <input type="hidden" value=""  name="abc_CRtext" id="abc_CRtext"/> <!-- hidden 用來代替select的文本-->
    <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 );
    });
})

查看演示

 

其實到這裏已經算是完成了。爲了方便利用，就做成插件吧。

 

查看完整版本演示     下載例子