jQuery Show Content Based on Select Option

jQuery Show Content Based on Select Option using hide() and show() function to work on change.

jQuery Show Content Based on Select Option

This code snippet will use three methods:

  • show() : is used to display hidden or selected elements.This methods works on the elements that are hidden by jQuery methods and CSS property display:none. This doesn’t work with visibility:hidden property.Syntax:
    $(selector).show(speed,easing,callback)
  • hide() : is used to hide selected elements. The functioning is similar to CSS property display:none. Syntax:
    $(selector).hide(speed,easing,callback)
  • change() : makes a function run when a change event occurs or trigers a change event. A change event occurs when a value for a particular element is changed. For example : selecting a different value from select drop-down is a change event. Syntax to trigger change for specific element :
    $(selector).change() 

    Syntax to attach a function :

    $(selector).change(function) 

jQuery Show Content Based on Select Option

First you need to create a select drop-down in HTML and assign it id=”select_box”. Add multiple options with values. A demo code follows:

<select id="select_box">
  <option>select a option</option>
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c</option>
  <option value="d">d</option>
</select>

Next you need to create divisions containing content relevant to each option. In other words,create division having content that is to be displayed when a particular option is selected.
Note:div should have id attribute values equal to that of value attributes of option tag.

Each div should have same class. This is because we will use this class with hide() method to set its display to none. A demo code is:

<div id="a" class="hide">
  <h2>This is id #a</h2>
  <!--content-->
</div>
<div id="b" class="hide">
  <h2>This is id #b</h2>
  <!--content-->
</div>
<div id="c" class="hide">
  <h2>This is id #c</h2>
  <!--content-->
</div>
<div id="d" class="hide">
  <h2>This is id #d</h2>
  <!--content-->
</div>

jQuery function is made to run each time a select value is change. $('#select_box').change(function (). This function is triggered on change of selected option. We use val() function to get value of selected option.var select=$(this).find(':selected').val(); . Variable select holds that value.

$(".hide").hide(); is used to set display:none of all elements having class=”hide”. $('#' + select).show(); will cause the div with id equal to value held by variable select.

$('#select_box').change(function () {
  var select=$(this).find(':selected').val();        
  $(".hide").hide();
  $('#' + select).show();
}).change();

Demo – jQuery Show Content Based on Select Option

See the Pen jQuery Show and hide Content Based on Select Option by scanfcode (@scanfcode) on CodePen.

Summary
jQuery Show Content Based on Select Option
Article Name
jQuery Show Content Based on Select Option
Description
jQuery Show Content Based Select Option using hide() and show() function to work on change. You need to use val method to get value of selected option
Author
Publisher Name
Scanfcode
Publisher Logo

Leave a Reply

Your email address will not be published. Required fields are marked *