一个合理的JQuery年龄范围（身高范围等）选择
前几天因项目需要，写了一个JQuery的年龄范围选择函数。使用情景：范围选择
比如年龄范围，身高范围，正常情况下，如果选了起点身高160，那截止的身高应该大于160，如果再次更改起点身高为150，那么截止身高应该为150以上的数值。
3月25日更新了右侧选择的时候进行逆向判断。
HTML代码：
<p class="right_select_infos">年龄：
<span class="inlineb info_selects">
<select name="fromage">
<option value="-1" class="placeholder">请选择</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
</select>
至
<select name="toage">
<option value="-1" class="placeholder">请选择</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
</select>
</span>
</p>
//更改年龄的时候验证（点击左侧）
function check_age(obj){
var fromage = $(obj).val();//当前选择年龄（第一个年龄）
var toage = $(obj).siblings('select').children('option');
toage.each(function(){
var toages = $(this).val();//右侧下拉框里的备选年龄
//如有右侧年龄小于或等于左侧的，则移除（即右边最小的年龄比左边所选的大1岁）
if(toages<=fromage){
if(toages!="-1"){//-1的选项是请选择，所以不删除
$(this).remove();
}
}
})
add_ages(obj,1);//为防止再次选择左侧年龄的时候值比第一次所选的小，运行第二个函数检测一下
}
//防止用户先选右侧年龄
function checkAgeSecond(obj){
var fromage = $(obj).siblings('select').children('option');
var toage = $(obj).val();
fromage.each(function(){
var fromages = $(this).val();
if(fromages>=toage){
if(fromages!="-1"){
$(this).remove();
}
}
})
add_ages(obj,2);
}
function add_ages(obj,position){
if(position==1){
var fromage = $(obj).val();//还是这个参数（左边的选项）
var toage = $(obj).siblings('select').children('option');
if(parseInt(fromage)+1<toage.eq(1).val()){//如果左边新选的值+1之后比右边的小，即，如果第一次选16，第二次选13，比上次所选的小了
var num = toage.eq(1).val()-(parseInt(fromage)+1);
for(var i=1; i<=num; i++){//循环判断小了几
var appen = "<option value=\"";
appen+=parseInt(fromage)+i;
appen+="\">";
appen +=parseInt(fromage)+i;
appen +="</option>";
toage.eq(1).before(appen);//右侧从第二个的前边追加新加的年龄选项（本来以为这个eq是会每次加一个选项之后会变化，但是实际是不变的，即这个eq(1)始终是右侧未追加新选项前的第二个选项）
}
}
}
if(position==2){//等于2说明选择的是右侧的年龄，下边的代码跟上边相反
var fromage = $(obj).siblings('select').children('option');
var toage = $(obj).val();
if(parseInt(fromage.eq(1).val())+1<toage){
var last=parseInt(fromage.parent('select').children('option:last').val())+1;
var num = toage-last;
//i<num;某些情况下会出现左侧追加的值少一个的情况
for(var i=0; i<num;i++){
var appen = "<option value=\"";
appen +=parseInt(last)+i;
appen+="\">";
appen +=parseInt(last)+i;
appen +="</option>";
fromage.parent('select').append(appen);
}
}
}
}
原文地址：一个合理的JQuery年龄范围（身高范围等）选择http://www.qichengzx.com/jquery-age-select.html
传送门：demo下载 http://pan.baidu.com/share/link?shareid=353685&uk=2199051005
github：https://github.com/qichengzx/jquery-age-select
页:
[1]