Change Div based on dropdown menu selection


<select id="select">
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
  <option value="option4">option4</option>
  <option value="option5">option5</option>
  <option value="option6">option6</option>
</select>
<!--Div  content-->
<div id="DivContent">
<div id="option1" class="div_content">
  option1
</div>
<div id="option2" class="div_content">
  option2
</div>
<div id="option3" class="div_content">
  option3
</div>
<div id="option4" class="div_content">
  option4
</div>
<div id="option5" class="div_content">
  option5
</div>
<div id="option6" class="div_content">
  option6
</div>
</div>
$(document).ready(function(){
  

  //hides dropdown content
  $(".div_content").hide();
  
  //unhides first option content
  $("#DivContent:first").show();
  
  //listen to dropdown for change
  $("#select").change(function(){
    //rehide content on change
    $('.div_content').hide();
    //unhides current item
    $('#'+$(this).val()).show();
  });
  
});

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.