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

   

实现的代码。

html代码：

     
        
      
            
                   
       
                
        
湖北省
                
        
广东省
                
        
湖南省
                
        
四川省
            
       
        
      
        
      
        
      
        
      
            
                   
       
                
        
武汉市
                
        
深圳市
                
        
长沙市
                
        
成都市
            
       
        
      
        
      
        
      
        
      
            
                   
       
                
        
蔡甸区
                
        
南山区
                
        
雨花区
                
        
武侯区
            
       
        
      
    
     
        

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;        }

via: