Geek Answers Handbook

JQuery show hide div based on value selection

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

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

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

How should it look to work? Sorry, I know this should be easy, but I'm new to all of this.

+11
source share
7 answers

You need to use the 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/

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

You want to add an event handler:

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

Then, as part of the ShowPrivileges function:

 var val = $("#privileges").val(); if(val == "whatever") //do something else //do something
0
source 
  $("#privileges").change(function(){ var select= $(this).val(); if(select=='custom'){ //some code } });

or

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

You make it too complicated:

First release the built-in onclick . Since you are using jQuery, dynamically attach the handler.

 <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, do not listen to 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>
0
source

You can clear the HTML by dropping onClick and removing the identifiers from the parameters.

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 just do this:

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

This can be done using toggle () as a shorthand:

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

If you want to switch the display when the page loads, you can trigger the same change() event, for example:

 $('#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>
0
source

More articles:


All Articles