jQuery select change show hide div event

Question

I am trying to create a form which when the select element  parcel  is selected it will show a div but when it is not selected I would like to hide the div  Here is my markup at the moment   This is my HTML so far         lt div class  row  gt          Type          lt select name  type  id  type  style  margin-left 57px  width 153px   gt                   lt option ame  l letter  value  l letter  gt Large Letter lt  option gt                   lt option name  letter  value  letter  gt Letter lt  option gt                   lt option name  parcel  value  parcel  gt Parcel lt  option gt           lt  select gt                       lt  div gt    lt div class  row  id  row dim  gt      Dimensions          lt input type  text  name  length  style  margin-left 12px   class  dimension  placeholder  Length  gt           lt input type  text  name  width  class  dimension  placeholder  Width  gt           lt input type  text  name  height  class  dimension  placeholder  Height  gt   lt  div gt     This is my jQuery so far        function             type   change function                row dim   hide                select  name  parcel   checked   val       parcel   show

User · Answer

Nothing new but caching your jQuery collections will have a small perf boost

$(function() {

    var $typeSelector = $('#type');
    var $toggleArea = $('#row_dim');

    $typeSelector.change(function(){
        if ($typeSelector.val() === 'parcel') {
            $toggleArea.show(); 
        }
        else {
            $toggleArea.hide(); 
        }
    });
});

And in vanilla JS for super speed:

(function() {

    var typeSelector = document.getElementById('type');
    var toggleArea = document.getElementById('row_dim');

    typeSelector.onchange = function() {
        toggleArea.style.display = typeSelector.value === 'parcel'
            ? 'block'
            : 'none';
    };

});

User · Answer

I used the following jQuery-based snippet to have a select-element show a div-element that has an id that matches the value of the option-element while hiding the divs that do not match  Not sure that it s the best way  but it is a way    x000D   x000D      sectionChooser   change function    x000D      var myID     this  val    x000D          panel   each function    x000D          myID       this  attr  id       this  show       this  hide    x000D          x000D      x000D   panel  display  none   x000D   one  display  block   x000D   lt select id  sectionChooser  gt  x000D       lt option value  one  selected gt Thing One lt  option gt  x000D       lt option value  two  gt Thing Two lt  option gt  x000D       lt option value  three  gt Thing Three lt  option gt  x000D   lt  select gt  x000D   x000D   lt div class  panel  id  one  gt  x000D       lt p gt Thing One lt  p gt  x000D   lt  div gt  x000D   lt div class  panel  id  two  gt  x000D       lt p gt Thing Two lt  p gt  x000D   lt  div gt  x000D   lt div class  panel  id  three  gt  x000D       lt p gt Thing Three lt  p gt  x000D   lt  div gt  x000D   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

Try    if    option value  parcel     is   checked           row dim   show      Or even     function             type   change function                row dim        option value  parcel     is   checked      show     hide                       JSFiddle  http   jsfiddle net 3w5kD

User · Answer

lt script gt      document  ready function            colorselector   on  change   function           if   this value     red                       divid   show                  else                     divid   hide                         lt  script gt    Do like this for every value Also change the values    as per your parameters

User · Answer

Try this     function             type   change function             if    this  val        parcel       row dim   show            else     row dim   hide

User · Answer

change your jquery method to    function         DOM ready            type   change function              alert  The option with value       this  val               hide the element you want to hide here with             id   attr  display   block       to show             id   attr  display   none       to hide

User · Answer

Try this      function               row dim   hide       this line you can avoid by adding  row dim display none   in your CSS          type   change function                   row dim   hide             if  this options this selectedIndex  value     parcel                      row dim   show                               Demo here

User · Answer

Use following JQuery  Demo    function             row dim   hide             type   change function            if     type   val       parcel                     row dim   show               else                   row dim   hide

User · Answer

Try the below JS    function             type   change function                row dim   hide             if    this  val       parcel                              row dim   show

[jquery] jQuery select change show/hide div event

Examples related to jquery

Examples related to html

Examples related to hide

Examples related to show