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