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