JSFiddle - React, Tailwind, and code Playground

by Oleg Kiriljuk

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/jquery.jqgrid.src.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/css/ui.jqgrid.css">
 <table id="list"></table>

JavaScript

$(function () {
	"use strict";
	var countries = "usId:US;ukId:UK",
		allStates = "alabamaId:Alabama;californiaId:California;floridaId:Florida;hawaiiId:Hawaii;londonId:London;oxfordId:Oxford",
		// the next maps provide the states by ids to the countries
		statesOfCountry = {
			"": allStates,
			usId: "alabamaId:Alabama;californiaId:California;floridaId:Florida;hawaiiId:Hawaii",
			ukId: "londonId:London;oxfordId:Oxford"
		},
		mydata = [
			{ id: "10", country: "usId", state: "alabamaId", name: "Louise Fletcher" },
			{ id: "20", country: "usId", state: "floridaId", name: "Jim Morrison" },
			{ id: "30", country: "ukId", state: "londonId",  name: "Sherlock Holmes" },
			{ id: "40", country: "ukId", state: "oxfordId",  name: "Oscar Wilde" }
		],
		$grid = $("#list"),
		changeStateSelect = function (countryId, countryElem) {
			// build "state" options based on the selected "country" value
			var $select, selectedValues,
				$countryElem = $(countryElem),
				isInSearchToolbar = $countryElem.parent().parent().parent().parent().hasClass("ui-search-table");

			// populate the subset of countries
			if (isInSearchToolbar) {
				// searching toolbar
				$select = $countryElem.closest("tr.ui-search-toolbar")
						.find(">th.ui-th-column select#gs_list_state");
			} else if ($countryElem.is(".FormElement")) {
				// form editing
				$select = $countryElem.closest("form.FormGrid")
						.find("select#state.FormElement");
			} else {
				// inline editing
				$select = $("select#" + $.jgrid.jqID($countryElem.closest("tr.jqgrow").attr("id")) + "_state");
			}

			if ($select.length > 0) {
				selectedValues = $select.val();
				if (isInSearchToolbar) {
					$select.html("<option value=\"\">All</option>");
				} else {
					$select.empty();
				}
				$.jgrid.fillSelectOptions($select[0], statesOfCountry[countryId], ":", ";", false, selectedValues);
			}
		},
		dataInitCountry = function (elem) {
			setTimeout(function () {
				$(elem).change();
			},...