How can I show elements based on the selected option?

Question

Isn't there a better solution than the commented if statement? I'm trying switch case but in this code, I can't hide the div so it's always existing which is wrong. I'm trying to show/hide elements depending on the selected option( it works with if statements but I think there's a cleaner way).

 <div>
       <label>Privileges:</label>
       <select name="privileges" id="privileges" class="" onclick="craateUserJsObject.ShowPrivileges();">
            <option id="all" value="all">All</option>
            <option id="custom" value="custom">Custom</option>
            <option id="test1" value="test1">test1</option>
            <option id="test2" value="test2">tst2</option>
        </select>
    </div>
    <div class="resources" style=" display: none;">resources</div>
    <div class="test1" style=" display: none;">test1</div>
    <div class="test2" style=" display: none;">test2</div>
    <script>
    var Privileges = jQuery('#privileges');
    var select = this.value;

    **/*Privileges.change(function () {
        if ($(this).val() == 'custom') {
            $('.resources').show();
        }
        else $('.resources').hide();
    }); */**
    
    Privileges.change(function () {
    switch($(this).val()){
    case 'custom':
     $('.resources').show();
     break;
     case 'test1':
     $('.test1').show();
     break;
     case 'test2':
     $('.test2').show();
     break;
    }
    });
    </script>

Does this answer your question? https://stackoverflow.com/questions/2975521/show-hide-div-based-on-select-option-jquery — isherwood, Jan 12 '21 at 17:30
Or this? https://stackoverflow.com/questions/18572401/jquery-select-change-show-hide-div-event — isherwood, Jan 12 '21 at 17:30
@isherwood the first link yes, but my idea was to use a switch case (which I think it won't work in this kind of problem).. thank you :) — Yosra MH, Jan 12 '21 at 17:35

score 2 · Accepted Answer · answered Jan 12 '21 at 17:23

A more succinct way to do this would be to put a common class on all the div elements you want to toggle so that you can easily hide them on change. In addition, add another class to them which matches the value of the option of they should be displayed when selected. From there you can easily build a selector to hide/show the content. Try this:

var $privileges = jQuery('#privileges');

$privileges.on('change', e => {
  $('.content').hide().filter('.' + e.target.value).show();
});

.content {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label>Privileges:</label>
  <select name="privileges" id="privileges">
    <option value="all">All</option>
    <option value="custom">Custom</option>
    <option value="test1">test1</option>
    <option value="test2">tst2</option>
  </select>
</div>
<div class="content custom">resources</div>
<div class="content test1">test1</div>
<div class="content test2">test2</div>

As an aside you should note that in order to follow best practices I moved the inline style attributes on the div to the stylesheet, and I also removed the onclick attribute you had on the select element. The latter should be attached unobtrusively using addEventListener(), if it's needed.

thank you so much Rory :) using the filter with commun class is a brilliant idea and I can't see a cleaner code than yours — Yosra MH, Jan 12 '21 at 17:41

How can I show elements based on the selected option?

1 Answers1