快捷導(dǎo)航

jQuery制作簡(jiǎn)潔的多級(jí)聯(lián)動(dòng)Select下拉框

更新時(shí)間：2014年12月23日 14:39:19 投稿：hebedich

省市多級(jí)聯(lián)動(dòng)的select下拉框有很多種實(shí)現(xiàn)方式，度娘上隨便一搜就一大堆，今天我們來(lái)討論的這款特效，代碼卻很簡(jiǎn)潔，兼容性也非常棒，推薦給大家。

今天我們要來(lái)分享一款很實(shí)用的jQuery插件，它是一個(gè)基于jQuery多級(jí)聯(lián)動(dòng)的省市地區(qū)Select下拉框，并且值得一提的是，這款聯(lián)動(dòng)下拉框是經(jīng)過(guò)自定義美化過(guò)的，外觀比瀏覽器自帶的要漂亮許多。另外，這個(gè)Select下拉框也可以綁定下拉事件，并獲取當(dāng)前選中項(xiàng)的值。

html代碼：

復(fù)制代碼代碼如下:

 <div class="wrap">

        <div class="nice-select" name="nice-select">

            <input type="text" value="==選擇省份==" readonly>

            <ul>

                <li data-value="1">湖北省</li>

                <li data-value="2">廣東省</li>

                <li data-value="3">湖南省</li>

                <li data-value="4">四川省</li>

            </ul>

        </div>

        <div class="h20">

        </div>

        <div class="nice-select" name="nice-select">

            <input type="text" value="==選擇城市==" readonly>

            <ul>

                <li data-value="1">武漢市</li>

                <li data-value="2">深圳市</li>

                <li data-value="3">長(zhǎng)沙市</li>

                <li data-value="4">成都市</li>

            </ul>

        </div>

        <div class="h20">

        </div>

        <div class="nice-select" name="nice-select">

            <input type="text" value="==選擇區(qū)縣==" readonly>

            <ul>

                <li data-value="1">蔡甸區(qū)</li>

                <li data-value="2">南山區(qū)</li>

                <li data-value="3">雨花區(qū)</li>

                <li data-value="4">武侯區(qū)</li>

            </ul>

        </div>

    </div>

    <script type="text/javascript" src="js/jquery.js"></script>

    <script>

        $('[name="nice-select"]').click(function (e) {

            $('[name="nice-select"]').find('ul').hide();

            $(this).find('ul').show();

            e.stopPropagation();

        });

        $('[name="nice-select"] li').hover(function (e) {

            $(this).toggleClass('on');

            e.stopPropagation();

        });

        $('[name="nice-select"] li').click(function (e) {

            var val = $(this).text();

            var dataVal = $(this).attr("data-value");

            $(this).parents('[name="nice-select"]').find('input').val(val);

            $('[name="nice-select"] ul').hide();

            e.stopPropagation();

            alert("中文值是：" + val);

            alert("數(shù)字值是：" + dataVal);

            //alert($(this).parents('[name="nice-select"]').find('input').val());

        });

        $(document).click(function () {

            $('[name="nice-select"] ul').hide();

        });

    </script>

css代碼：

復(fù)制代碼代碼如下:

        body

        {

            color: #555;

            font-size: 14px;

            font-family: "微軟雅黑" , "Microsoft Yahei";

            background-color: #EEE;

        }

        a

        {

            color: #555;

        }

        a:hover

        {

            color: #f00;

        }

        input

        {

            font-size: 14px;

            font-family: "微軟雅黑" , "Microsoft Yahei";

        }

        .wrap

        {

            width: 500px;

            margin: 100px auto;

        }

        .h20

        {

            height: 20px;

            overflow: hidden;

            clear: both;

        }

        .nice-select

        {

            width: 245px;

            padding: 0 10px;

            height: 38px;

            border: 1px solid #999;

            position: relative;

            box-shadow: 0 0 5px #999;

            background: #fff url(images/a2.jpg) no-repeat right center;

            cursor: pointer;

        }

        .nice-select input

        {

            display: block;

            width: 100%;

            height: 38px;

            line-height: 38px \9;

            border: 0;

            outline: 0;

            background: none;

            cursor: pointer;

        }

        .nice-select ul

        {

            width: 100%;

            display: none;

            position: absolute;

            left: -1px;

            top: 38px;

            overflow: hidden;

            background-color: #fff;

            max-height: 150px;

            overflow-y: auto;

            border: 1px solid #999;

            border-top: 0;

            box-shadow: 0 3px 5px #999;

            z-index: 9999;

        }

        .nice-select ul li

        {

            height: 30px;

            line-height: 30px;

            overflow: hidden;

            padding: 0 10px;

            cursor: pointer;

        }

        .nice-select ul li.on

        {

            background-color: #e0e0e0;

        }