欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2014年12月23日 14:39:19   投稿:hebedich  
省市多級聯(lián)動的select下拉框有很多種實(shí)現(xiàn)方式,度娘上隨便一搜就一大堆,今天我們來討論的這款特效,代碼卻很簡潔,兼容性也非常棒,推薦給大家。

今天我們要來分享一款很實(shí)用的jQuery插件,它是一個(gè)基于jQuery多級聯(lián)動的省市地區(qū)Select下拉框,并且值得一提的是,這款聯(lián)動下拉框是經(jīng)過自定義美化過的,外觀比瀏覽器自帶的要漂亮許多。另外,這個(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">長沙市</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;
        }

代碼很簡潔,我這里就不多做解釋了,小伙伴們自己預(yù)覽下就知道效果是多麼的簡潔大方了,非常實(shí)用。

相關(guān)文章

最新評論