通过JS模拟select表单，达到美化效果[demo]

.m-form{background:#fff;padding:50px;font-family:12px/1.5 arial,\5b8b\4f53,sans-serif;}
.m-form ul,.m-form li,.m-form dl,.m-form dt,.m-form dd{padding:0;margin:0;list-style:none;}
.m-form label{color:#6E6E6E;display:inline-block;height:36px;float:left;line-height:36px;width:120px;text-align:right;padding-right:20px;}
.m-form .item{height:46px;margin-bottom:10px;}
.m-form .t{display:block;height:36px;line-height:36px;padding:0 10px;float:left;}
.m-select{height:36px;float:left;width:234px;background-image:url(http://dreamback.github.io/selectorjs/src/images/selector.png);background-repeat:no-repeat;background-position:100% 0;border-radius: 5px;}
.m-select-w{width:100px;}
.m-focus{background-position:100% 100%;position:relative;}
.m-select dt{line-height:32px;border:2px solid #E3E3E3;text-align:center;text-indent:-31px;cursor:pointer;height:32px;border-radius: 5px;}
.m-select dd{width:100%;overflow-y:auto;background:#fff;position:absolute;left:0;top:34px;display:none;border-top:2px solid #E3E3E3;border-bottom:2px solid #E3E3E3;border-radius: 5px;box-shadow:0 6px 12px rgba(0,0,0,0.175)}
.m-select dd a{display:block;font-size:14px;text-indent:1em;line-height:32px;border-right:2px solid #E3E3E3;border-left:2px solid #E3E3E3;height:32px;}
.m-select dd a:hover{text-decoration:none;background:#eee;}
.m-select dd.age,.m-select dd.height{width:400px;border:2px solid #E3E3E3;}
.m-select dd.age a,.m-select dd.height a{float:left;width:40px;text-align:center;border:none;display:inline-block;text-indent:0;height:24px;line-height:24px;}
.m-select dd.region{width:460px;height:200px;border:2px solid #E3E3E3;}
.region .tab{height:28px;padding:10px 0 0 10px;}
.region .tab li{float:left;height:24px;line-height:24px;padding:0 20px;border:1px solid #E3E3E3;margin-right:5px;cursor:pointer;}
.region .tab li.on{border:2px solid #7DB3D4;cursor:default;position:relative;background:#7DB3D4;color:#fff;}
.region .tab-con{border-top:2px solid #7DB3D4;margin:0 10px 10px 10px;position:relative;top:-2px;background:#fff;}
.m-select dd.region a{float:left;text-align:center;border:none;width:62px;overflow:hidden;overflow:hidden;display:inline-block;text-indent:0;}
.m-form .form-item{position:static;margin-bottom:200px;}

通过JS模拟select表单，达到美化效果

Demo

婚姻状况：

未婚

年龄：

至

身高：

至

居住地:

出生地:

月收入:

至

Code

              //普通模式
 
               new SelectorJS.selector.init({
 
                 id:'#Marriage',
 
                 data: [["1", "未婚"], ["3", "离异"], ["4", "丧偶"] ],
 
                 value:'未婚'
 
               });  
 
               //年龄联动
 
               new SelectorJS.age('#Age0','#Age1',25,27);
 
               //身高联动
 
               new SelectorJS.heightMulti('#Height0','#Height1',168,178);
 
               //地区联动 二级
 
               new SelectorJS.area.init('#AreaSelector','101020600', false);
 
               //地区联动 三级
 
               new SelectorJS.area.init('#AreaSelector2','101151202', true);
 
               //自定义联动
 
               var salaryCode = [["1", "1000"], ["2", "2000"], ["3", "3000"], ["4", "5000"], ["5", "8000"], ["6", "10000"], ["7", "20000"], ["8", "50000"], ["9", "50000以上"] ];
 
               var salaryDefault1 = '1';
 
               var salaryDefault2 = '4';
 
               new SelectorJS.selector.init({
 
                 id:'#Salary0',
 
                 data: salaryCode,
 
                 value:salaryDefault1,
 
                 click: function(val, index){
 
                   new SelectorJS.selector.init({
 
                     id:'#Salary1',
 
                     data: salaryCode.slice(index),
 
                     value:  Math.max(salaryCode[index][0], parseInt(salaryDefault2) )
 
                   }).select.click();
 
                 }
 
               }); 
 
               new SelectorJS.selector.init({
 
                     id:'#Salary1',
 
                     data: salaryCode.slice(parseInt(salaryDefault1)),
 
                     value:  salaryDefault2
 
               }); 
         

说明

Selector.js与address.json两个文件必须放在同一个目录下。当调用地区的方法的时候才加载adrress文件

github下载地址：http://dreamback.github.io/selectorjs/index.html