国家因地制宜，城市不因州而变

Question

国家，州，城市

码

​

<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=for状态

option1 var-作为1.*州的城市

现在我想为state-2添加城市，如果我们选择state -2，就会显示这些城市。

最后一次总结:所以基本上各州根据国家变化，我想根据州改变城市。我希望你

Answer 1

按照您所使用的模式，下面是解决方案。本质上，我是根据option1 select的值过滤item2数组。请小心，因为我已经清除了额外的空格，以使item2的内部HTML包含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>

​

对于每个选定的值，应该有更好的方法来使用不同的变量。但是，由于您的代码是这样构造的，所以我尝试进行最小的更改。