JSFiddle - React, Tailwind, and code Playground

by stefanu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css">
<select id="level1" name="level1" title="title 1" data-live-search="true" placeholder="placeholder 1" ></select>
<select id="level2" name="level2" title="title 2" data-live-search="true" placeholder="placeholder 2" ></select>
<select id="level3" name="level3" title="title 3" data-live-search="true" placeholder="placeholder 3" ></select>
<button id="show" >Show value</button>
<div id="value"></div>

JavaScript

var jData1 = {"data":[{"label":"Option 1","value":"A"},{"label":"Option 2","value":"B"},{"label":"Option 3","value":"C"}] };
var jData2 = {"data":[{"label":"Option 1","value":"X"},{"label":"Option 2","value":"Y"},{"label":"Option 3","value":"Z"}]};
var jData3 = {"data":[{"label":"Option 1","value":"1"},{"label":"Option 2","value":"2"},{"label":"Option 3","value":"3"}]};

function queryData(select, value, reset, url, payload, callback) {
	$(reset) ? $(reset).each(function(i, e) { $(e).selectpicker('val', '') }) : false;
	$.ajax({
	  type		: 'POST',
		url			: url,
   	data		: payload,
		dataType	: 'json',
        success		: function(resp) {
					$(select).find('optgroup').remove();
					$(select).find('option').remove();
       		if (resp.data.length > 0) {
	        	resp.data.forEach(function (o) {
	        		o.option = $('<option/>').attr('value', o.value).text(o.label).appendTo($(select))[0];
	        	});
       		}
       		else {
			}
      $(select).selectpicker('destroy').selectpicker().selectpicker('val', value);
			if (value) {
				$(select).find('option[value=' + value + ']').attr('selected','selected');
			}
			else {
				$(select).attr('title', $(select).data('placeholder'));
			}
			if (callback) {
				callback();	
			}
		},
		error    : function(response) {
		},
		complete	: function(response) {
   	}
	});
}

function queryLevel1(value, callback) {
	queryData('#level1', value,'#level2,#level3', '/echo/json/', { 
			json: JSON.stringify( jData1 )
		},
		callback);
}
function queryLevel2(value, callback) {
	queryData('#level2', value,'#level3', '/echo/json/', {
			json: JSON.stringify( jData2 )
		},
		callback);
}
function queryLevel3(value, callback) {
	queryData('#level3', value,'#nothing', '/echo/json/', {
			json: JSON.stringify( jData3 )
		},
		callback);
}
$('#level1').off('change').on('change', function () {
	queryLevel2('');
});
$('#level2').off('change').on('change', function () {
	queryLevel3('');
});

// uncomment this line to reproduce the...