JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
                <div class="container">
                    <div class="row form-row">
						<div class="col-xs-4">
							<label>Select Category</label>
							<div class="form-group">
								<select multiple class="form-control category-select">
									<optgroup label="Card Sets">
										<option>Yu-Gi-Oh!</option>
										<option>Pokemon</option>
										<option>World Of Warcraft</option>
										<option>Ben10</option>
										<option>Magic The Gathering</option>
										<option>Football</option>
										<option>Doctor Who</option>
										<option>Star Wars</option>
									</optgroup>
									<optgroup label="Sticker Sets">
										<option>Yu-Gi-Oh!</option>
										<option>Pokemon</option>
										<option>World Of Warcraft</option>
										<option>Ben10</option>
										<option>Magic The Gathering</option>
										<option>Football</option>
										<option>Doctor Who</option>
										<option>Star Wars</option>
									</optgroup>
									<optgroup label="Books">
										<option>Yu-Gi-Oh!</option>
										<option>Pokemon</option>
										<option>World Of Warcraft</option>
										<option>Ben10</option>
										<option>Magic The Gathering</option>
										<option>Football</option>
										<option>Doctor Who</option>
										<option>Star Wars</option>
									</optgroup>	
									<optgroup label="Other">
										<option>Yu-Gi-Oh!</option>
										<option>Pokemon</option>
										<option>World Of Warcraft</option>
										<option>Ben10</option>
										<option>Magic The Gathering</option>
										<option>Football</option>
										<option>Doctor Who</option>
										<option>Star Wars</option>
									</optgroup>																	
								</select>
							</div>						
						</div><!-- col-xs-12 -->

						<div...

JavaScript

// Form select chain event
// http://forum.jquery.com/topic/form-select-chain-event#14737000005893546
$(function(){
    $('select').change(function() {
        var disabled = $.trim($(this).val()) == '';
        console.log("value selected : " + $(this).val());
        console.log(disabled);
        var nextSelect = $(this).parents('.col-xs-4').nextAll().find('select');
         if (disabled) {
            nextSelect.val(''); // Clear
        }
        nextSelect.prop('disabled', true).first().prop('disabled', disabled);
    });
});