Show/Hide 'select' by selection

by labanino

HTML

<div>
  <select id="district">
    <label>Select your school district</label>
    <option value="default">Choose a district</option>
    <option value="texas">Texas</option>
    <option value="florida">Florida</option>
  </select>
</div>

<div id="texas" class="schools">
  <div>
  	<h3>Select a school type</h3>
    <hr>
    <label>High School</label>
    <select>
      <option value="default">Choose a school</option>
      <option value="high1">High School 1</option>
      <option value="high2">High School 2</option>
      <option value="high3">High School 3</option>
    </select>
  </div>
  <div>
    <label>Middle School</label>
    <select>
      <option value="default">Choose a school</option>
      <option value="middle1">Middle School 1</option>
      <option value="middle2">Middle School 2</option>
      <option value="middle3">Middle School 3</option>
    </select>
  </div>
  <div>
    <label>Elementary School</label>
    <select>
      <option value="default">Choose a school</option>
      <option value="elementary1">Elementary School 1</option>
      <option value="elementary2">Elementary School 2</option>
      <option value="elementary3">Elementary School 3</option>
    </select>
  </div>
</div>

<div id="florida" class="schools">
  <div>
  	<h3>Select a school type</h3>
    <hr>
    <label>High School</label>
    <select>
      <option value="default">Choose a school</option>
      <option value="high1">High School 1</option>
      <option value="high2">High School 2</option>
      <option value="high3">High School 3</option>
    </select>
  </div>
  <div>
    <label>Middle School</label>
    <select>
      <option value="default">Choose a school</option>
      <option value="middle1">Middle School 1</option>
      <option value="middle2">Middle School 2</option>
      <option value="middle3">Middle School 3</option>
    </select>
  </div>
  <div>
    <label>Elementary School</label>
    <select>
      <option value="default">Choose a school</option>
...

JavaScript

$(function() {
	$('.schools').hide();
    $('#district').change(function(){
        $('.schools').hide();
        $('#' + $(this).val()).show();
    });
});