通过JS模拟select表单,达到美化效果
Demo
- 25
- 181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
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
});
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文件