Javascript 基于“选择值”显示或隐藏值

在一个站点上工作，我想根据第一个站点的选择显示/隐藏第二个站点的值

我试着玩Javascript，但老实说我不擅长

<select id="job_type">
    <option value="1"><option> 1</option>
    <option value="2"><option> 1</option>
    <option value="3"><option> 1</option>
    <option value="4"><option> 1</option>                       
</select>

<select id="function">
    <option value="a" class="case_a"><option> show only when job_type = 4</option>
    <option value="b" class="case_a"><option> show only when job_type = 4</option>
    <option value="c" class="case_b"><option> show only when job_type =/= 4</option>
    <option value="d" class="case_b"><option> show only when job_type =/= 4</option>                        
</select>

<script>
$(document).ready(function(){
    $('#job_type').on('change', function() {
        if ( this.value == '4') {
            $(".case_a").show();
            $(".case_b").hide();
        } else {
            $(".case_a").hide();
            $(".case_b").show();
        }
    });
});
</script>

---

您的代码有一些小问题。请尝试下面的代码片段。还有一些额外的标签

$document.readyfunction{ $'job\u type'。在'change'上，函数{ 如果$this.val=='4' { $案例展示； $.case_b.hide； } 其他的 { $.case_a.hide； $.case_b.show； } }; }; 1. 1. 1. 1. 仅当作业类型=4时显示 仅当作业类型=4时显示 仅当作业类型=/=4时显示 仅当作业类型=/=4时显示 映射对象将值从第一个选择映射到第二个选择，因此您可以根据需要更改映射对象。

您的HTML不正确

<select id="job_type">
    <option value="1"><option> 1</option>
    <option value="2"><option> 2</option>
    <option value="3"><option> 3</option>
    <option value="4"><option> 4</option>                       
</select>

<select id="function">
    <option value="a" class="case_a">show only when job_type = 4</option>
    <option value="b" class="case_a">show only when job_type = 4</option>
    <option value="c" class="case_b">show only when job_type =/= 4</option>
    <option value="d" class="case_b">show only when job_type =/= 4</option>                        
</select>

---

您的html存在语法错误。1应该是1您面临的确切错误？您的代码看起来不错，唯一的问题是@nickzoum已经指出的问题。可能您想添加$'function:selected'。prop'selected'，false以“撤消”已删除的选择。并可能将选定的道具添加到更改作业类型后出现的第一个功能选项中。

map = {
"1": ["a", "b"],
'2': ["c"],
"3": ["a", "d"],
"4": ["b", "c"]
}

$(document).ready(function(){
    $('#job_type').on('change', function() {
        option = this.value
        $("#function > option").each(function() {
             if(map[option].includes(this.value)){
                  $('.' + this.className ).show();
             }else{
                  $('.' + this.className ).hide();
             }
        });

    });
})

<select id="job_type">
    <option value="1"><option> 1</option>
    <option value="2"><option> 2</option>
    <option value="3"><option> 3</option>
    <option value="4"><option> 4</option>                       
</select>

<select id="function">
    <option value="a" class="case_a">show only when job_type = 4</option>
    <option value="b" class="case_a">show only when job_type = 4</option>
    <option value="c" class="case_b">show only when job_type =/= 4</option>
    <option value="d" class="case_b">show only when job_type =/= 4</option>                        
</select>

$(document).on('change', '#job_type', function(){
   var val = this.value;
   var groupA = $(document).find('#function option[class$=_a]');
   var groupB = $(document).find('#function option[class$=_b]');
    if(val == 4){
      groupA.show()
      groupB.hide()
    }else{
      groupA.hide()
      groupB.show()
    }

})