jQuery制作簡潔的多級聯(lián)動Select下拉框

    今天我們要來分享一款很實用的jQuery插件，它是一個基于jQuery多級聯(lián)動的省市地區(qū)Select下拉框，并且值得一提的是，這款聯(lián)動下拉框是經(jīng)過自定義美化過的，外觀比瀏覽器自帶的要漂亮許多。另外，這個Select下拉框也可以綁定下拉事件，并獲取當(dāng)前選中項的值。
    html代碼：
    代碼如下:
    <div>
    <div 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>
    </div>
    <div 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>
    </div>
    <div 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代碼：
    代碼如下:
    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;
    }
    代碼很簡潔，我這里就不多做解釋了，小伙伴們自己預(yù)覽下就知道效果是多麼的簡潔大方了，非常實用。