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

通过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