Show div based on select value

Question

I'm trying to make a form that changes after the users makes a choice. If the user select "Option A" then show content of the div with the class "option1".

I have already done this with very simple jquery(see code below or jsfiddle). What I can't figure out is how to make it dynamic.

Here is how I would do it in my head:

1. Get all option values from "#select" and put into array.
2. Replace the content of "hideAll" function with the new array.
3. Make some kind of "for-each-function" that runs though the array and makes the if stament.

A little note: The option value are always the same as the div class.

var hideAll = function() {
  $('.option1, .option2, .option3').hide();
}

$('#select').on('change', function() {
  hideAll();
  var category = $(this).val();
  console.log(category);
  if (category === 'option1') {
    $('.option1').show();
  }
  if (category === 'option2') {
    $('.option2').show();
  }
  if (category === 'option3') {
    $('.option3').show();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
  <label for="option">Options</label>
  <select name="select" id="select">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>

  <div class="option1" style="display:block;">
    <label for="countries">Countries</label>
    <select name="countries">
      <option value="denmark">Denmark</option>
      <option value="norway">Norway</option>
      <option value="uk">UK</option>
    </select>
  </div>

  <div class="option2" style="display:none;">
    <label for="letters">Letters</label>
    <select name="letters">
      <option value="a">A</option>
      <option value="b">B</option>
      <option value="c">C</option>
    </select>
  </div>

  <div class="option3" style="display:none;">
    <label for="numbers">Numbers</label>
    <select name="numbers">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </div>
</form>

Answer 1

I think there's an easier way to tackle this. First, use a combination of IDs and classes for the HTML, and then use JQuery to handle the dynamic stuff for you.

The HTML

Note that I have added class="option-grouping" id="option1" etc to each of your divs. This is better semantic structure and makes the JQuery easier.

<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<div class="option-grouping" id="option1" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
  <option value="denmark">Denmark</option>
  <option value="norway">Norway</option>
  <option value="uk">UK</option>
</select>
 </div>

<div class="option-grouping" id="option2" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
   <option value="a">A</option>
   <option value="b">B</option>
   <option value="c">C</option>
</select>
</div>

<div class="option-grouping" id="option3" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>
</div>

The JQuery

This is the cool part. With that all done, try this as your JQuery:

$('#select').on('change', function() {
    var category = $(this).val();
    /* Hide all the divs */
    $('.option-grouping').hide();
    /* Now unhide the selected options */
    $('#' + category).show();
});

Works a treat!

Answer 2

No need for a loop at all, and you can just search for any div whose class begins with option:

var hideAll = function() {
  $('div[class^=option]').hide();
}

$('#select').on('change', function() {
  hideAll();
  var category = $(this).val();

  $('.' + category).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<div class="option1" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
  <option value="denmark">Denmark</option>
  <option value="norway">Norway</option>
  <option value="uk">UK</option>
</select>
 </div>

<div class="option2" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
   <option value="a">A</option>
   <option value="b">B</option>
   <option value="c">C</option>
</select>
</div>

<div class="option3" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>
</div>

Answer 3

Give your option divs another class

<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<div class="option1 optiondiv" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
  <option value="denmark">Denmark</option>
  <option value="norway">Norway</option>
  <option value="uk">UK</option>
</select>
 </div>

<div class="option2 optiondiv" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
   <option value="a">A</option>
   <option value="b">B</option>
   <option value="c">C</option>
</select>
</div>

<div class="option3 optiondiv" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>
</div>

Use your new class in hideall

var hideAll = function() {
    $('.optiondiv').hide();
}

Use the select value to display a block

$('#select').on('change', function() {
    hideAll();
    var category = $(this).val();
    $('.' + category).show();
});

http://jsfiddle.net/yd5qsquL/