CODEWITHSUNDEEP
javascriptjquery
Dušan
Dušan

Reputation: 498

jQuery show/hide a div based on select value

I have a select list with values 'all' and 'custom'. On select with value 'custom' a div with class 'resources' should appear, and if the value is 'all' it should be hidden.

Form is:

<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>
    </select>
</div>
<div class="resources" style=" display: none;">resources</div>

And javascript for this is:

ShowPrivileges: function() {
    var Privileges = jQuery('#privileges');
    var select = this.value;
    Privileges.change(function() {
        if (select === 'custom') {
            $('.resources').show();
        }
    });
}

How should this look in order to work? Sorry, I know this should be simple, but I am new with all this.

Upvotes: 13

Views: 49575

Answers (7)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

That could be done with `toggle()` as a shorthand :

$('#privileges').change(function() {
  $('.resources').toggle($(this).val() == 'custom');
});

If you want to toggle the display in the page load you could trigger the same change() event, like :

$('#privileges').change(function() {
  $('.resources').toggle($(this).val() == 'custom');
}).change();


$('#privileges').change(function() {
  $('.resources').toggle($(this).val() == 'custom');
});
<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 id="all" value="all">All</option>
    <option id="custom" value="custom">Custom</option>
  </select>
</div>
<div class="resources" style=" display: none;">resources</div>

Upvotes: 0

Pavlo Shandro
Pavlo Shandro

Reputation: 808

Privileges.on('change',function(){
    if($(this).val()=='custom'){
        $('.resources').show();
    }else{
        $('.resources').hide();
    }
})

Upvotes: 1

c0deNinja
c0deNinja

Reputation: 3986

You can clean up the HTML by dropping the onClick and removing the IDs from the options.

HTML:

<div>
    <label>Privileges:</label>
    <select name="privileges" id="privileges">
        <option value="all">All</option>
        <option value="custom">Custom</option>
    </select>
</div>
<div class="resources" style=" display: none;">resources</div>

And your JavaScript could simply do this:

$('#privileges').on('change', function() {
        if($(this).val() === 'all') {
            $('.resources').hide();
        } else {
            $('.resources').show();
        }
 });

Upvotes: 2

Steve
Steve

Reputation: 8640

You are making this too complicated:

First off, drop the inline onclick. Since you are using jQuery, attach your handler dynamically.

<div>
    <label>Privileges:</label>
    <select name="privileges" id="privileges">
        <option id="all" value="all">All</option>
        <option id="custom" value="custom">Custom</option>
    </select>
</div>
<div class="resources" style=" display: none;">resources</div>

Secondly, don't listen for the click and then attach the change handler. Attach it directly

<script>
jQuery('#privileges').on('change',function(){
    if(jQuery(this).val()=='custom'){
        jQuery('.resources').show();
    } else {
        jQuery('.resources').hide();
    }
});
</script>

Upvotes: 0

dfsq
dfsq

Reputation: 193261

You need to use val method:

var Privileges = jQuery('#privileges');
var select = this.value;
Privileges.change(function () {
    if ($(this).val() == 'custom') {
        $('.resources').show();
    }
    else $('.resources').hide(); // hide div if value is not "custom"
});

http://jsfiddle.net/RWUdb/

Upvotes: 15

sasi
sasi

Reputation: 4318

  $("#privileges").change(function(){
     var select=  $(this).val();
       if(select=='custom'){
          //some code
         }
    });

or

  var select=$('#privileges :selected').val()
    if(select=='custom'){
    //some code
  }

Upvotes: 0

DeeDub
DeeDub

Reputation: 1662

You will want to add the event handler:

$("#privileges").change(craateUserJsObject.ShowPrivileges);

Then, within your ShowPrivileges funciton:

var val = $("#privileges").val();
if(val == "whatever")
    //do something
else
    //do something

Upvotes: 0

Related Questions