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