州因国家而异，但城市未因州而异

Question

3 下拉菜单 国家，州，城市

代码

<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>		

这里的 state 是根据县变化的，但是 City 不是根据 state 变化的。

*option var=for state

option1 var-for city of state 1...*

现在我想为 state-2 添加城市 如果我们选择 state -2 则会显示城市

最终总结： 所以基本上州会根据国家而变化 , 我想根据州改变城市。 我希望你

Answer 1

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

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