jQuery creates a simple multi-level linkage Select drop-down box_jquery

Today we are going to share a very practical jQuery plug-in. It is a province, city and region Select drop-down box based on jQuery multi-level linkage. It is worth mentioning that this linkage drop-down box has been customized and beautified. , the appearance is much prettier than the one that comes with the browser. In addition, this Select drop-down box can also bind the drop-down event and obtain the value of the currently selected item.

html code:

Copy code The code is as follows:

 

       

           
           

               
• 湖北省

               
• 广东省

               
• 湖南省

               
• 四川省

           

       

       

       

       

           
           

               
• 武汉市

               
• 深圳市

               
• 长沙市

               
• 成都市

           

       

       

       

       

           
           

               
• 蔡甸区

               
• 南山区

               
• 雨花区

               
• 武侯区

           

       

   

   
    <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" , "Microsoft Yahei";
             background-color: #EEE;
}
a
            {
             color: #555;
}
a:hover
            {
              color: #f00;
}
input
            {
               font-size: 14px;
             font-family: "Microsoft Yahei" , "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;
}

The code is very simple, so I won’t explain it too much here. You can preview it yourself and you will know how simple and elegant the effect is, and it is very practical.