JSFiddle - React, Tailwind, and code Playground

by Dug Sohn

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<h1>Chained With Single Label</h1>
<div class="alert alert-info">Like the slideUp -- Now need to show and easyway back up, and some sort of highlighting when you are at the end of the trail</div>
<h4>My Claim</h4>

<form>
<table class="table table-striped" id="single">
    <tr>
        <td>For
        </td>
        <td>
    <select id="level0" name="level0" class="form-control">
        <option value="">--Select</option>
        <option value="GBSL">General Building Stock Loss</option>
        <option value="GBSD">General Building Stock Damage</option>
        <option value="DG">Debris Generation</option>
        <option value="SR">Shelter Requirements</option>
        <option value="VL">Vehicle Loss</option>
        <option value="VD">Vehicle Damage</option>
    </select>
    <select id="level1" name="level1" class="form-control" >
        <option value="">-- </option>
        
        <option value="All" class="GBSL">All</option>
        <option value="GeneralOccupancy" class="GBSL">General Occupancy</option>
        <option value="BuildingType" class="GBSL">Building Type</option>
        
        <option value="ByCount" class="GBSD">By Count</option>
        <option value="BySqFt" class="GBSD">By SqFt</option>
        
        <option value="TotalTons" class="DG">Total Tons</option>
        <option value="FinishTons" class="DG">Finish Tons</option>
        <option value="StructureTons" class="DG">Structure Tons</option>
        <option value="FoundationTons" class="DG">Foundation Tons</option>
        
        <option value="DisplacedPopulation" class="SR">Displaced Population"></option>
        <option value="ShortTermNeeds" class="SR">Short Term Needs</option>
        
        <option value="Day" class="VL VD">Day</option>
        <option value="Night" class="VL VD">Night</option>
        
    </select>
  
    
    
    <select id="level2" name="level2"...

CSS

#single select:disabled {
    
    display:none
}

JavaScript

/* Chained search examples
 *
 *
 *
 *
 *
 * Chained - jQuery / Zepto chained selects plugin
 *
 * Copyright (c) 2010-2014 Mika Tuupola
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Project home:
 *   http://www.appelsiini.net/projects/chained
 *
 * Version: 0.9.10
 *
 */

;(function($, window, document, undefined) {
    "use strict";

    $.fn.chained = function(parent_selector, options) {

        return this.each(function() {

            /* Save this to child because this changes when scope changes. */
            var child   = this;
            var backup = $(child).clone();

            /* Handles maximum two parents now. */
            $(parent_selector).each(function() {
                $(this).bind("change", function() {
                    updateChildren();
                });

                /* Force IE to see something selected on first page load, */
                /* unless something is already selected */
                if (!$("option:selected", this).length) {
                    $("option", this).first().attr("selected", "selected");
                }

                /* Force updating the children. */
                updateChildren();
            });

            function updateChildren() {
                var trigger_change = true;
                                        alert('finished');

                var currently_selected_value = $("option:selected", child).val();

                $(child).html(backup.html());

                /* If multiple parents build classname like foo\bar. */
                var selected = "";
                $(parent_selector).each(function() {
                    var selectedClass = $("option:selected", this).val();
                    if (selectedClass) {
                        if (selected.length > 0) {
                            if (window.Zepto) {
                                /* Zepto class regexp dies with classes like foo\bar. */
                 ...