随笔 - 315  文章 - 1  评论 - 12  阅读 - 24万

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)
    })
});
复制代码

 

posted on   小虾米吖~  阅读(73)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库

点击右上角即可分享
微信分享提示