Question

在天气预报站点中，我有一个下拉菜单选择“地区”，还有第二个下拉菜单从所选的“地区”中选择一个“城市”。一切正常，但每次我进行选择并显示所需的预测时，两个下拉菜单都会刷新并返回其默认值，即“选择地区”和“选择城市”。）

最近，我在以下国家预报站点中看到了一个更好的解决方案：https://www.ipma.pt/en/otempo/prev.localidade.hora/

他们的第一个下拉菜单的默认设置为“主要地区”，第二个下拉菜单的默认设置为“首都城市”，并且立即显示前东。只有在那之后，用户才能选择任何其他地区以及该地区的任何城市来显示预测，但是菜单将继续显示这些最后选择的选项，并且不会返回到原始默认值。

我是一个初学者，尽管我为尝试实现此解决方案付出了反复尝试的努力，但我还是不得不放弃并寻求帮助。

有人可以给我一个提示，如何使我的下拉菜单不使用默认值“选择地区”和“城市”而不是默认值“区1”和“城市A”打开吗？用户选择“地区2”和“城市C”时，如何保持显示这些值的菜单，而不是在显示预测后返回“选择地区”和“选择城市”呢？谢谢您！

当前代码：

   <?PHP
   // array with city codes that are need in the url that will get the forecast json.
   $arr = ["31880" => "City A", 
          "31994" => "City B",
          "31937" => "City C", 
          "32046" => "City D"];

   $city = isset($_GET['city']) ? $_GET['city'] : array_keys($arr)[0];
   ?>


   <form id="dropdowns" action="">

   <!-- <label>Districts:</label>-->
        <select id="district" name="district">
            <option value="000">- Select District -</option>
        </select>

   <!-- <label>Cities:</label> -->
        <select id="city" name="city" onchange="this.form.submit()">
            <option value="000">- Select City -</option>

  </select>
  </form>


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

  $.each(myJson.district, function (index, value) {
  $("#district").append('<option value="'+value.id+'">'+value.name+'</option>');
  });

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

Answer 1

以您发送的网站为例，我可以告诉他们使用ajax发出更新天气表的请求，而无需重新加载页面。

如果您从浏览器中选中选项卡“网络” （可以通过按F12来打开它），则在选择字段之一中进行更改时，他们会向其后端发送请求负责获取数据并将其发送到前端的API。

此方法是使用 ajax 进行的，不需要您的客户端重新加载其页面来提出后端请求。我建议您阅读here，以阐明ajax的工作方式和ajax请求的工作方式。

由于您已经在使用 jQuery ，因此您可以使用它来发出ajax请求，例如波纹管：

$.ajax({
    method: "GET", // Request method
    url: "retrieve_data.php", // Path to the file responsable to receive your request and get the data to return to the frontend
    data: {
        data: "my data" // Data to be to your backend
    }
})

您基本上需要做的是，在其中一个选择中更改值之后，将新值发送到后端（使用ajax）以获取与请求值相关的结果并发送回前端，因此前端负责显示更新的数据。

要在选择字段上的值更改时获取事件，可以执行以下操作：

$('.your-select').on('change', function() { // An event called everytime the value in your select is changed
  var value = $(this).val(); // Here you get the value from your option, so you can send to your backend and the backend turns to be responsable to get the related data

  // Ajax callout
});

这样做，您可以满足两个需求，保留选择值并在前端更改数据。

其他支持链接：

用于打开带有城市和地区值的选择

您基本上需要设置一个具有所有区值的变量，而是使用javascript使用php来遍历区并构建选项：

<?php foreach($districts as $district): ?>
    <option value="<?= $district->id ?>"> <?= $district->name ?> </option>
<?php endforeach; ?>

变量$districts应该包含应用程序的所有区，并且作为城市的第二选择，您必须像以前那样使用先前数组中第一个区的城市来初始化它。要动态更改（更改区域选择时），您需要使用ajax。

提交后如何保持下拉菜单显示所选选项？

1 个答案: