Jquery Dependent Dropdown

by Alvin Olavarrieta

HTML

<script src="http://static.jstree.com/3.0.0/assets/dist/jstree.min.js"></script>
<link rel="stylesheet" href="http://static.jstree.com/3.0.0/assets/dist/themes/default/style.min.css">
<select id="city" name="city">
  <option value="0">Select City</option>
  <option value="1">Manchester</option>
  <option value="2">Leicester</option>
  <option value="3">Londra</option>
</select>

<select id="street" name="street">
  <option value="0">Select Street</option>
  <option value="1">Street 1</option>
  <option value="1">Street 2</option>
  <option value="1">Street 3</option>
  <option value="2">Street 4</option>
  <option value="2">Street 5</option>
  <option value="2">Street 6</option>
  <option value="1200">Street 7</option>
  <option value="1200">Street 8</option>
  <option value="1200">Street 9</option>
</select>

JavaScript

$('#city').on("change", function(e) {
  $('#street option').hide();
  $('#street option[value="' + $(this).val() + '"]').show()
});