Question

对不起，我没有被包括在内＃34;我的尝试＆＃34;对于这个，我对jquery没用，所以需要一些建议!!

我想根据第一个selctor的结果更改第二个selctor的值。

我有一个构建器和区域的数据库，其头文件为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是从列表中删除重复的构建器名称，这是一种处理。

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

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

如果您需要更多信息，请说明，我不善于解释自己。

Answer 1

正如您所说，您没有使用jQuery或Ajax的经验，我会尽可能多地发表我的回答。我假设您的页面中有两个选择下拉列表。

第一个包含构建器，因此它将具有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);
      }
    });
  });
});

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

在第一次选择

1 个答案: