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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。