Question

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

我尝试使用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>

Answer 1

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="job_type">
<option value="1">1</option>
<option value="2">1</option>
<option value="3">1</option>
<option value="4">1</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>

Answer 2

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

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

对于JS：

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();
             }
        });

    });
})

map对象将值从第一个选择映射到第二个选择，因此您可以更改map对象以适合您的需求。

Answer 3

您的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>

JavaScript

$(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()
    }

})

根据选择的值显示或隐藏值

3 个答案: