Skip to content
Advertisement

Show Div with jquery depending on list (php)

I have read how to show/hide a div with jquery when there is a dropdown selection, built with “select” and options.

However, I am trying to figure out how to do this when I have the following code for a dropdown selection.

<?php echo $this->lists['catid']; ?>

This list displays a dropdown of options and I want for a specific option to show/hide a div.

The following code could work for a select with a specific id,”purpose”, for example, but in my situation how I am supposed to use it?

$('#catid').on('change', function() {
  if ( this.value == '37');
  {
    $("#business").show();
  }
  else
  {
    $("#business").hide();
  }
});
})

This is the html of the output of the php code

This is the html of the output of the php code

Thank you

Advertisement

Answer

Try code should work for you

$(document).ready(function(event) {
  $('#catid').on('change', function() {
    let selected = $('#catid').val();
    if (selected == 37) {
      $("#business").show();
    } else {
      $("#business").hide();
    }
  });
});
#business {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<select id="catid">
  <option value="38">option 38(hide)</option>
  <option value="37">option 37(show)</option>
  <option value="39">option 39(hide)</option>
</select>
<div id="business">
  Division Visible!
</div>
User contributions licensed under: CC BY-SA
1 People found this is helpful
Advertisement