Состояние меняется в зависимости от страны, но город не меняется в зависимости от штата

Question

3 Dropdowns страна, штат, город

код

<script>
	$(document).ready(function() {


		$("#item1, #item2").change(function() {
		    var value = $(this).val();
		    $("#item2").html(options[value]);

		    var value1 =$("#item2").val();
			$("#item3").html(options1[value]);
});
	

    var options = [
       "<option value='test'>IN state-1</option><option value='0'>IN state-2</option>",


    "<option value='test'>US state-1</option><option value='1'>US state-2</option>",


    "<option value='test'>UK state-1</option><option value='2'>UK state-2</option>"
    ];


var options1 = [

	"<option value='test'>IN-state -1 city 1</option><option value='1'>IN-state -1 city 1</option>",

	"<option value='test'>US -state -1 city-1</option><option value='2'>US -state -1 city-2</option>",

	"<option value='test'>UK -state -1 city-1</option><option value='3'>UK -state -1 city-2</option>"];


});

</script>

<div class="content-header">
		<div class="container-fluid">
 			<div class="row">
 				<select id="item1">
 					<option disabled="disabled" selected="selected">--select--</option>
				    <option value="0">India</option>
				    <option value="1">US</option>
				    <option value="2">UK</option>
				</select>

				<select id="item2">
				    <option value="">-- select one -- </option>
				</select>

				<select id="item3">
				<option> -- select another one --</option>
				</select>

			</div>
		</div>
	</div>		

Здесь состояние меняется в зависимости от округа, но Город не меняется в зависимости от штата.

* опция var = для штата

опция1 var-для города штата 1 ... *

Теперь я хочу добавить города для штата-2, и эти города будут отображаться, если мы выбираем штат -2

Итоговая сумма: Итак, в основном штаты меняются в зависимости от стран, я хочу менять города в соответствии с государством. Я надеюсь, что вы

Answer 1

Следуя шаблону, который вы использовали, ниже приведено решение. По сути, я фильтрую массив option1 на основе значения item2 select. Будьте осторожны, поскольку я очистил лишние пробелы, чтобы сделать внутренний HTML из item2 , чтобы включить часть параметров, которые есть в item3

$(document).ready(function() {


		$("#item1").change(function() {
		    var value = $(this).val();
		    $("#item2").html(options[value]);
        $("#item3").html('<option> -- select another one --</option>');

});

$("#item2").change(function() {
		    //var value = $(this).val();
        var filteredOptions = [];
        var innerText = $('#item2 option:selected').html();
        filteredOptions = options1.filter(op=> {
       return op.toLowerCase().includes(innerText.toLowerCase());
        });
		    $("#item3").html(filteredOptions);
});
	

    var options = [
       "<option value='test'>IN state-1</option><option value='0'>IN state-2</option>",


    "<option value='test'>US state-1</option><option value='1'>US state-2</option>",


    "<option value='test'>UK state-1</option><option value='2'>UK state-2</option>"
    ];


var options1 = [

	"<option value='test'>IN state-1 city 1</option><option value='1'>IN state-1 city 1</option>",
  
  "<option value='test'>IN state-2 city 1</option><option value='1'>IN state-2 city 1</option>",

	"<option value='test'>US state-1 city-1</option><option value='2'>US state-1 city-2</option>",

	"<option value='test'>UK state -1 city-1</option><option value='3'>UK state -1 city-2</option>"];


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content-header">
		<div class="container-fluid">
 			<div class="row">
 				<select id="item1">
 					<option disabled="disabled" selected="selected">--select--</option>
				    <option value="0">India</option>
				    <option value="1">US</option>
				    <option value="2">UK</option>
				</select>

				<select id="item2">
				    <option value="">-- select one -- </option>
				</select>

				<select id="item3">
				<option> -- select another one --</option>
				</select>

			</div>
		</div>
	</div>

Должен быть лучший способ сделать это, используя разные переменные для каждого выбранного значения. Но так как ваш код структурирован как таковой, я попытался внести минимальные изменения