JSFiddle - React, Tailwind, and code Playground

by jezrael

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<select id="cat1" style="width: 40%">
	<option selected >choose cat1</option>
</select>
<select id="cat2" style="width: 40%">
	<option selected >choose cat2</option>
</select>


<table id="tab">
	<thead>
		<tr>
			<th>col1</th>
			<th>col2</th>
		</tr>
	</thead>
</table>

JavaScript

function fillcat1() {
		$.getJSON('https://api.myjson.com/bins/2n5m2', function(data){
			var html = '<option value="0" selected disabled>choose category</option>';
			$('#cat1').empty();
			var len = data.length;
			for (var i = 0; i< len; i++) {
				html += '<option value="' + data[i].id + '">' + data[i].text + '</option>';
			}
			$('#cat1').append(html).selectmenu( "refresh" );
		});
	}

	$("#cat1").selectmenu({
		'change': function (event, ui) {
			$.getJSON('https://api.myjson.com/bins/' + $("#cat1").val(), function(data){
				var html = '<option value="0" selected disabled>choose subcategory</option>';
				$('#cat2').empty();				
				var len = data.length;
				for (var i = 0; i< len; i++) {
					html += '<option value="' + data[i].id + '">' + data[i].text + '</option>';
				}
				$('#cat2').append(html).selectmenu( "refresh" );
			});

			createTable($("#cat1").val());

		}
	});
	
	$("#cat2").selectmenu({
		'change': function () {
			createTable($("#cat2").val());
		}
	});
	
	function createTable(url) {
		console.log(url);
		$('#tab').DataTable( {
			"ajax": {
				"url": "https://api.myjson.com/bins/" + url,
				"dataSrc": ""
			},
			dom: 't',
			destroy: true,
			columns: [
				{ "data": "id"},
				{ "data": "text"}
			]
		} );
	}	
fillcat1();
createTable('2n5m2');