jQuery制作简洁的多级联动Select下拉框_jquery

今天我们要来分享一款很实用的jQuery插件，它是一个基于jQuery多级联动的省市地区Select下拉框，并且值得一提的是，这款联动下拉框是经过自定义美化过的，外观比浏览器自带的要漂亮许多。另外，这个Select下拉框也可以绑定下拉事件，并获取当前选中项的值。

html代码：

复制代码 代码如下:

 

       

           
           

               
• 湖北省

               
• 广东省

               
• 湖南省

               
• 四川省

           

       

       

       

       

           
           

               
• 武汉市

               
• 深圳市

               
• 长沙市

               
• 成都市

           

       

       

       

       

           
           

               
• 蔡甸区

               
• 南山区

               
• 雨花区

               
• 武侯区

           

       

   

   
    <script><br /> $('[name="nice-select"]').click(function (e) {<br /> $('[name="nice-select"]').find('ul').hide();<br /> $(this).find('ul').show();<br /> e.stopPropagation();<br /> });<br /> $('[name="nice-select"] li').hover(function (e) {<br /> $(this).toggleClass('on');<br /> e.stopPropagation();<br /> });<br /> $('[name="nice-select"] li').click(function (e) {<br /> var val = $(this).text();<br /> var dataVal = $(this).attr("data-value");<br /> $(this).parents('[name="nice-select"]').find('input').val(val);<br /> $('[name="nice-select"] ul').hide();<br /> e.stopPropagation();<br /> alert("中文值是：" + val);<br /> alert("数字值是：" + dataVal);<br /> //alert($(this).parents('[name="nice-select"]').find('input').val());<br /> });<br /> $(document).click(function () {<br /> $('[name="nice-select"] ul').hide();<br /> });<br /> </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;
        }

代码很简洁，我这里就不多做解释了，小伙伴们自己预览下就知道效果是多麽的简洁大方了，非常实用。