JQuery - Show/Hide Div with Select Choice

by Matthew Schenker

HTML

<form>
  <p>Please Make a Choice:</p>
  <select id="dropdown" name="dropdown">
    <option></option>
    <option value="Yes" selected>Yes</option>
    <option value="No">No</option>
    <option value="Maybe">Maybe</option>
  </select>
  <div id="showme">
    <label>Choice 1</label><input type="checkbox" name="choice1" value="Choice 1">
    <label>Choice 2</label><input type="checkbox" name="choice2" value="Choice 2">
    <label>Choice 3</label><input type="checkbox" name="choice3" value="Choice 3">
  </div>
</form>

CSS

#showme {
  display: none;
}

JavaScript

$('#dropdown').change(function() { // Displays #showmea on page load if #dropdowna == Yes
  if (this.value == 'Yes') {
    $('#showme').show();
  } else {
    $('#showme').hide();
  }
});
$(document).ready(function() { // Displays #showmea on page load if #dropdowna == Yes
  if ($('#dropdown').val() == 'Yes')
    $('#showme').show();
});