Pure JS - Show/Hide Div with Select Choice

by Matthew Schenker

HTML

<form>
  <p>Please Make a Choice:</p>
  <select name="Choice" onchange="showHideInput(this)">
    <option></option>
    <option value="yes">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

function showHideInput(sel) {
  var value = sel.value;
  if (value == 'yes') {
    document.getElementById('showme').style.display = 'block';
  } else {
    document.getElementById('showme').style.display = 'none';
  }
}