JSFiddle - React, Tailwind, and code Playground

Cascading combo example

by Ben Clayton

HTML

<div id="example3" class="bs-docs-example">
				<h4>Phone finder</h4>

				<select class="step1" name="screen">
					<option value="">Screen size</option>
					<option value="4" selected="selected">4.0"</option>
					<option value="4.3">4.3"</option>
					<option value="4.7">4.7"</option>
					<option value="5">5.0"</option>
				</select>
				<select class="step2" name="resolution">
					
				<option value="">Screen resolution</option><option value="540">540p</option><option value="720">720p</option><option value="1080">1080p</option></select>
				<select class="step3" name="storage" disabled="">
					
				<option value="">Storage size</option></select>

				<h4>Matches <img src="ajax-loader.gif" data-bind="visible: loading" style="display: none;"></h4>
				<ul data-bind="foreach: phones, visible: phones().length &gt; 0" style="display: none;"></ul>
				<p data-bind="visible: phones().length == 0" style="">No matches</p>
			</div>

JavaScript

(function($,undefined){'use strict';var defaultOptions={usePost:false,useJson:false,selectBoxes:[]};function Dropdown(options,parent){this.el=$(options.selector,parent.el);this.parent=parent;this.options=$.extend({},defaultOptions,options);this.name=this.options.paramName||this.el.attr('name');this.requiredDropdowns=options.requires&&options.requires.length?$(options.requires.join(','),parent.el):null;this.isLoadingClassName=this.options.isLoadingClassName||parent.options.isLoadingClassName||'cascading-dropdown-loading';}
Dropdown.prototype={_create:function(){var self=this;self.pending=0;self.initialised=false;self.originalDropdownItems=self.el.children('option');if(typeof self.options.onChange==='function'){self.el.change(function(event){self.options.onChange.call(self,event,self.el.val(),self.getRequiredValues());});}
if(self.requiredDropdowns){self.requiredDropdowns.change(function(event){self.update();});}
self._initSource();self.update();},enable:function(){return this.el.removeAttr('disabled').trigger('enabled');},disable:function(){return this.el.attr('disabled','disabled').trigger('disabled');},_requirementsMet:function(){var self=this;if(!self.requiredDropdowns){return true;}
if(self.options.requireAll){return(self.requiredDropdowns.filter(function(){return!!$(this).val();}).length==self.options.requires.length);}else{return(self.requiredDropdowns.filter(function(){return!!$(this).val();}).length>0);}},_initSource:function(){var self=this;if($.isArray(self.options.source)){this.source=function(request,response){response($.map(self.options.source,function(item){return{label:item.label||item.value||item,value:item.value||item.label||item};}));};}else if(typeof self.options.source==="string"){var...