jq实现薪资区间值选择

实现效果：选择薪资第一个值后，第二个值会根据第一个选中的值变为设定好的区间

 

 

html

<select name="salaryStart" id="salaryStart" style="margin-right: 15px;" v-model="salary_start">
       <option value="选择薪资范围">选择薪资范围</option>
       <option value="面议">面议</option>
</select>
                                   ~
<select name="salaryEnd" id="salaryEnd" disabled="disabled" v-model="salary_end">
        <option value="选择薪资范围">选择薪资范围</option>
</select>

 

js

$(function () {
    for(let i=1;i<=60;i++){
        $('#salaryStart').append("<option value='"+i+"'>"+i+"k</option>");
    }
    let _position = getQueryVariable('pos_id');
    if(_position){
        $('#salaryEnd').prop('disabled',true);
    }
    $('#salaryStart').change(function () {
        $('#salaryEnd').prop('disabled',false);
        let options=$("#salaryStart option:selected").index();//选中项的下标
        let val = $(this).val();
        if(options == 1){
            $('#salaryEnd').hide();//面议隐藏后一项
        }else{
            $('#salaryEnd').show();
            let _val = parseInt(val);
            if(_val <= 50){    //50或以下
                $("#salaryEnd option").remove();
                for(let i=_val+1;i<=_val*2;i++){
                    $('#salaryEnd').append("<option value='"+i+"'>"+i+"k</option>");
                }
            }else{    //50以上
                $("#salaryEnd option").remove();
                for(let i=_val+10;i<= _val+50&&i<=260;i+=10){
                    $('#salaryEnd').append("<option value='"+i+"'>"+i+"k</option>");
                }
            }
        }
        let _salary = $("#salaryStart option:selected").val() + 'K-' +$("#salaryEnd option:selected").val()+'K';
        sessionStorage.setItem('salary',_salary)
    })
});

$(function () {
    for(let i=1;i<=60;i++){
        $('#salaryStart').append("<option value='"+i+"'>"+i+"k</option>");
    }
    let _position = getQueryVariable('pos_id');
    if(_position){
        $('#salaryEnd').prop('disabled',true);
    }
    $('#salaryStart').change(function () {
        $('#salaryEnd').prop('disabled',false);
        let options=$("#salaryStart option:selected").index();//选中项的下标
        let val = $(this).val();
        if(options == 1){
            $('#salaryEnd').hide();//面议隐藏后一项
        }else{
            $('#salaryEnd').show();
            let _val = parseInt(val);
            if(_val <= 50){    //50或以下
                $("#salaryEnd option").remove();
                for(let i=_val+1;i<=_val*2;i++){
                    $('#salaryEnd').append("<option value='"+i+"'>"+i+"k</option>");
                }
            }else{    //50以上
                $("#salaryEnd option").remove();
                for(let i=_val+10;i<= _val+50&&i<=260;i+=10){
                    $('#salaryEnd').append("<option value='"+i+"'>"+i+"k</option>");
                }
            }
        }
        let _salary = $("#salaryStart option:selected").val() + 'K-' +$("#salaryEnd option:selected").val()+'K';
        sessionStorage.setItem('salary',_salary)
    })
});

 

标签：salary,option,val,selected,salaryEnd,jq,区间,let,薪资
来源： https://www.cnblogs.com/LindaBlog/p/16336591.html