在第一次选择时更改第二次选择的值

Question

很抱歉，我没有在这个中包含“我的尝试”，我对 jquery 没用，所以需要一些建议！

我想根据第一个选择器的结果更改第二个选择器的值。

我有一个包含标题 builder_name 和 builder_region 的构建器和区域的数据库。列表最终看起来像这样......

builder_1 region_1
builder_1 region_2

builder_2 region_1

builder_3 region_1
builder_3 region_2
builder_3 region_3

（你懂的）

我正在使用我构建的表单中的以下内容来获取第一个选择框的构建器列表...

echo '<select class= "ml-select" name="gen_builder">';
            echo '<option value=" ">Select Builder</option>';
            while($row = mysql_fetch_array($rsBUILDER)) {

                    if($linebreak !== $row['builder_name']) {
                    echo '<option value="'.$row['builder_name'].'">'.$row['builder_name'].'</option>';
                    }
                    else {echo "";}

                    $linebreak = $row['builder_name'];
            }
            echo '</select>';

$linebreak 用于从列表中删除重复的构建器名称，这是一种享受。

我想要实现的是第二个选择器，它选择可用的区域，这取决于在第一个选项中选择的构建器。我希望这是有道理的？？？？

第二个查询需要查看在第一个选择器中选择的构建器，并仅过滤掉具有构建器名称表单选择器的行中的区域。

如果您需要更多信息，请务必说出来，我不擅长解释自己。

Answer 1

正如您所说，您没有使用 jQuery 或 Ajax 的经验，我将使用尽可能多的 cmets 发布我的答案。我假设您的页面中有两个选择下拉菜单。

第一个包含构建器，因此它将具有id="builders"。

第二个包含区域，所以它会有id="regions"。

据我了解，第一个选择将正是您在问题中发布的那个，生成的服务器端（由 PHP）。我只要求您对其进行轻微更改，使每个选项值等于构建器的数据库 ID，而不是其名称（除非构建器的主键是他们的名称，而不是 ID）。这对最终用户没有影响，但对我们的 jQuery 解决方案很重要。第二个是空的，因为想法是用与第一个下拉列表中选择的构建器相关的区域动态填充它。

现在让我们来看看 jQuery 代码：

//Everything that goes below this first line will be ready as soon as the page is fully loaded
$(document).ready(function() {
  //The following code defines an event. More precisely, we are defining that the code inside it will run every time our select with id "builders" has its value changed
  $('#builders').change(function() {
    //$(this) is our builders select. $(this).val() contains the selected value, which is the ID of our selected builder
    var currentValue = $(this).val();
    //Now, this is our Ajax command that will invoke a script called get_regions.php, which will receive the builder's ID in $_GET['builder_id'] and you can use to query your database looking for all regions related to this builder. Make sure to create an array with the returned regions. Your get_regions.php's last line should be echo json_encode($regions); 
    $.get("get_regions.php", {'builder_id': currentValue}, function(data) {
      //Inside this function is the code that will run when we receive the response from our PHP script. It contains a JSON encoded list of regions, so first of all we need to parse this JSON
      var regions = $.parseJSON(data);
      //Before filling our second select dropdown with the regions, let's remove all options it already contains, if any
      $('#regions').empty();
      //Now, all there is left is to loop over the regions, adding each as an option of the regions dropdown. I'll do it the universal way
      for (var i = 0; i < regions.length; i++) {
        var regionOption = '<option value="'+regions[i]['region_name']+'">';
        regionOption += regions[i]['region_name'];
        regionOption += '</option>';
        $('#regions').append(regionOption);
      }
    });
  });
});

尽管有任何语法错误（无法从这里测试代码），但这应该可以解决问题。希望 cmets 足够清楚，让您了解 jQuery 中的工作原理。