Dynamic <select> dropdown using Javascript

Question

I have a HTML page with three dropdowns. Based on the first dropdown, options in the second will be displayed. I achieved it using the below code which I found online and its wo

Answer 1

Filtering down your third list isn't any different from filtering down the second list. In fact, if you apply your attributes in a structured way, you can do all the work in one event handler.

Here's a running example:

$("[data-child]").change(function() {
  //store reference to current select
  var me = $(this);

  //get selected group
  var group = me.find(":selected").val();

  //get the child select by it's ID
  var child = $("#" + me.attr("data-child"));

  //hide all child options except the ones for the current group, and get first item
  var newValue = child.find('option').hide().not('[data-group!="' + group + '"]').show().eq(0).val();
  child.trigger("change");

  //set default value
  child.val(newValue);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="catagory" data-child="family">
  <option selected disabled>Select Device Catagory</option>
  <option value="Access Points">Access Points</option>
  <option value="Audio/Video Devices">Audio/Video Devices</option>
  <option value="Automobile">Automobile</option>
  <option value="Barcode Scanner">Barcode Scanner</option>
  <option value="Biometric Devices">Biometric Devices</option>
</select>
<select id="family" data-child="item">
  <option data-group='SHOW' value='0'>-- Select --</option>
  <option data-group="Access Points"  value="AeroHive">AeroHive</option>
  <option data-group="Access Points"  value="Aruba">Aruba</option>
  <option data-group="Audio/Video Devices" value="Barco">Barco</option>
  <option data-group="Audio/Video Devices" value="Behringer">Behringer</option>
  <option data-group="Automobile" value="Tesla">Tesla</option>
  <option data-group="Barcode Scanner" value="Intermec">Intermec</option>
  <option data-group="Barcode Scanner" value="Symbol">Symbol</option>
  <option data-group="Biometric Devices" value="Suprema">Suprema</option>
</select>
<select id="item">
  <option data-group='SHOW' value='0'>-- Select --</option>
  <option data-group="AeroHive"  value="AeroHive1">AeroHive 1</option>
  <option data-group="AeroHive"  value="AeroHive2">AeroHive 2</option>
  <option data-group="AeroHive"  value="AeroHive3">AeroHive 3</option>
  <option data-group="Aruba"  value="Aruba">Aruba</option>
  <option data-group="Barco" value="Barco1">Barco 1</option>
  <option data-group="Barco" value="Barco2">Barco 2</option>
  <option data-group="Behringer" value="Behringer1">Behringer 1</option>
  <option data-group="Behringer" value="Behringer2">Behringer 2</option>
  <option data-group="Behringer" value="Behringer3">Behringer 3</option>
  <option data-group="Behringer" value="Behringer4">Behringer 4</option>
  <option data-group="Tesla" value="Tesla">Tesla</option>
  <option data-group="Intermec" value="Intermec">Intermec</option>
  <option data-group="Symbol" value="Symbol">Symbol</option>
  <option data-group="Suprema" value="Suprema">Suprema</option>
</select>