标签：salary option val selected salaryEnd jq 区间 let 薪资

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

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。