如何创建一个下拉子菜单并将其与上一个菜单使用的数组相关联?

Question

我有一个包含20个城市的下拉菜单列表，因此用户可以选择一个特定的城市并获取其天气预报。它可以正常工作，因为您可以在此处查看 https://meteolitoral.com/previsao5.php

问题是，现在我想在之前的列表中添加更多的 80 个城市，但这会使 100 个城市的"无休止"和"不切实际"的下拉菜单！

我解决这个问题的想法是按"州"组织城市，这样每个州就只有少数城市可供选择。

这是通过所选州的州下拉菜单和城市子菜单实现的。

我已经做到了，但为了让事情变得更容易，我想继续使用我在单个下拉菜单上使用的相同城市和city_codes数组。问题是我找不到将此数组与新的下拉城市子菜单相关联的方法。

你可以看到我已经在这里做了什么：https://www.meteolitoral.com/previsaon.php

新的州菜单和城市子菜单：

<form id="dropdowns" action="">
<!--    <label>States:</label>-->
<select id="states" name="states">
<option value="000">- Select State -</option>
</select>
<br />
<!--    <label>Cities:</label> -->
<select id="cities" name="network">
<option value="000">- Select City -</option>
</select>

</form>
<script type="text/javascript">
var myJson = {
"states": [
{
"name": "State 1",
"id": "state1",
"cities": [
{
"name": "City A",
"id": "31880",
},
{
"name": "City B",
"id": "31994",
}
]
},
{
"name": "State 2",
"id": "state2",
"cities": [
{
"name": "City C",
"id": "31937",
},
{
"name": "City D",
"id": "32046",
}
]
}
]
}

$.each(myJson.states, function (index, value) {
$("#states").append('<option value="'+value.id+'">'+value.name+'</option>');
});
$('#states').on('change', function(){
console.log($(this).val());
for(var i = 0; i < myJson.states.length; i++)
{
if(myJson.states[i].id == $(this).val())
{
$('#cities').html('<option value="000">- Select City -</option>');
$.each(myJson.states[i].cities, function (index, value) {
$("#cities").append('<option value="'+value.id+'">'+value.name+'</option>');
});
}
}
});
</script>

以前的单个下拉菜单，使用需要与新城市子菜单关联的数组：

<?php
$arr = ["31880" => "City A", 
"31994" => "City B", 
"31937" => "City C", 
"32046" => "City D"] 
$city = isset($_POST['city']) ? $_POST['city'] : array_keys($arr)[0];
?>
<form name="f" id="a" method="post" action="">
<select id="city" name="city" onchange="this.form.submit()" >                      
<?php
foreach ($arr as $k => $v) {
echo "<option value='$k'" . ($k == $city ? " selected" : "") . ">$v</option>n";
}
?>
</select>
</form>

所以，我正在努力做但没有实现的是：

1. 在主下拉菜单中选择一个状态后
2. 在城市下拉菜单中选择该州的一个城市后
3. 在当前代码中进行所需的更改，以便任何选定的城市都可以使用当前数组 ($arr( 并保持代码的其余部分不变，因为它可以完美运行。

我不得不承认我是一个初学者，有时这会使小细节变成大问题：-(

提前非常感谢您的宝贵帮助。

Answer 1

由于@kaczmen问题得到解决

"您正在提交带有默认GET方法的表单，但实际上在此处查找POST参数：$city = isset($_POST['city'](？$_POST['城市'] ： array_keys($arr([0];.

将其更改为 $city = isset($_GET['city']( ？ $_GET['city'] ： array_keys($arr([0]; 或者将表单标签更改为表单 id="dropdowns" method="POST"，它应该按预期工作。

我还必须删除这部分：

<form name="f" id="a" method="post" action="">
<select id="city" name="city" onchange="this.form.submit()" >                      
<?php
foreach ($arr as $k => $v) {
echo "<option value='$k'" . ($k == $city ? " selected" : "") . ">$v</option>n";
}
?>
</select>
</form>