一个合理的JQuery年龄范围（身高范围等）选择

qichengzx

前几天因项目需要，写了一个JQuery的年龄范围选择函数。
使用情景：范围选择
比如年龄范围，身高范围，正常情况下，如果选了起点身高160，那截止的身高应该大于160，如果再次更改起点身高为150，那么截止身高应该为150以上的数值。
3月25日更新了右侧选择的时候进行逆向判断。
HTML代码：

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>  
 

复制代码

JS复制代码

 
    //更改年龄的时候验证（点击左侧）  
    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