通過JS模擬select表單，達到美化效果[demo][轉]

　　

轉自：

　　http://www.cnblogs.com/dreamback/p/SelectorJS.html

通過JS模擬select表單，達到美化效果

Demo

　　　　

 

------------------------------------------------

　　博主經營一家發飾淘寶店，都是純手工制作哦，開業沖鑽，只為信譽！需要的親們可以光顧一下！謝謝大家的支持！
店名：
　　小魚尼莫手工飾品店
經營:
　　發飾、頭花、發夾、耳環等（手工制作）
網店：
　　http://shop117066935.taobao.com/

  ---------------------------------------------------------------------

繼續正題... 

 　

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

我的微博文件包下載地址：
http://vdisk.weibo.com/s/Cd8pPaw56qL3S

 

 店名：
　　小魚尼莫手工飾品店
經營:
　　發飾、頭花、發夾、耳環等（手工制作）
網店：
　　http://shop117066935.taobao.com/