Dropdown filters

combo_box.html

<div class='control-group'>
          <label class='control-label' for='function'>CSCI</label>
          <div class='controls'>
            <select id='csci'>
              <option></option>
              <option value='77e9c955-a790-4dec-b16a-6fb58d4f0239'>Sonobuoy System</option>
            </select>
          </div>
        </div>
        <div class='control-group'>
          <label class='control-label' for='function'>Module</label>
          <div class='controls'>
            <select id='module'>
              <option></option>
              <option data-parent='77e9c955-a790-4dec-b16a-6fb58d4f0239' value='ec5fbfdf-0b2f-4c2c-8830-49a529fe3e63'>Processed Sonobuoys</option>
              <option data-parent='77e9c955-a790-4dec-b16a-6fb58d4f0239' value='fe15e5df-53a2-4fe1-b75d-c902c1ec9e53'>Stockage</option>
            </select>
          </div>
        </div>
        <div class='control-group'>
          <label class='control-label' for='function'>Function</label>
          <div class='controls'>
            <select id='function'>
              <option></option>
              <option data-parent='ec5fbfdf-0b2f-4c2c-8830-49a529fe3e63' value='05aba713-32c1-48e2-8d44-9f5c4e51901c'>ANALOG</option>
              <option data-parent='ec5fbfdf-0b2f-4c2c-8830-49a529fe3e63' value='99a97455-f522-400e-8f14-c3191f937b6f'>DIGITAL</option>
            </select>
          </div>
        </div>

dropdowns.js

// Dropdown filters
$('#csci').change(function() {
	var csci = $(this).find('option:selected').val();
	$('#module option').show().filter(function(index) {
		return $(this).data('parent') != csci;
	}).hide();
});
	
$('#module').change(function() {
	var module = $(this).find('option:selected').val();
	$('#function option').show().filter(function(index) {
		return $(this).data('parent') != module;
	}).hide();
});