CODEWITHSUNDEEP
javascriptjquery
diegie
diegie

Reputation: 77

Show or hide value base on select value

Working on a site and I want to show/hide the values of a second based on the choices of the first .

I tried to play with Javascript, but I'm not good at it to be honest.

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

Upvotes: 1

Views: 112

Answers (3)

Ntiyiso Rikhotso
Ntiyiso Rikhotso

Reputation: 720

Your HTML is incorrect


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

})

Upvotes: 0

adnanmuttaleb
adnanmuttaleb

Reputation: 3604

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

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

    });
})

The map objects maps the values from the first select to the second select, so you can alter the map object to fit your needs.

Upvotes: 0

Shahzad
Shahzad

Reputation: 1705

There are a few minor issues with your code. Please try the snippet below. There also were some extra tags

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

Upvotes: 1

Related Questions