更改第一个选择的第二个选择的值 [英] Change the value of second select on first select

问题描述

很抱歉，我没有在其中包括我的尝试"，我对jquery没用，所以需要一些建议！

I'm sorry I haven't included "my attempt" as such with this one, I'm useless with jquery so need some advice!!

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

I would like to change the value of a second selctor based on the results of the first.

我有一个带有头文件builder_name和builder_region的构建器和区域的数据库.列表看起来像这样...

I have a database of builders and regions with the headers builder_name and builder_region. The list ends up looking like this ...

builder_1 region_1
builder_1 region_2

builder_2 region_1

builder_3 region_1
builder_3 region_2
builder_3 region_3

(您的想法)

我正在使用以下格式构建表单，以获取第一个选择框的构建器列表...

I'm using the following in the form I've built to get a list of the builders for the first select box ...

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是为了消除列表中重复的构建器名称，这很有效.

The $linebreak is to get rid of the duplicate builder names from the list, which works a treat.

我要实现的是第二个选择器，该选择器根据在第一个选项中选择的构建器来选择可用区域.我希望这有意义吗???

What I would like to achieve is a second selector that selects the regions available, dependant upon the builder that has been selected in the first option. I hope this makes sense????

第二个查询需要查看在第一个选择器中选择的构建器，并仅过滤出具有构建器名称形式选择器一个的行中的区域.

The second query needs to look at the builder selected in the first selector and filter out just the regions that are in rows with the builder name form selector one.

请说出您是否需要更多信息，我不太会自我解释.

Please do say if you need further information, I'm not great at explaining myself.

推荐答案

正如您所说的，您没有使用jQuery或Ajax的经验，我将在评论中尽可能多地发表评论.我假设您的页面上有两个选择下拉列表.

As you said you don't have experience with jQuery or Ajax, I'll post my answer with as many comments as possible. I will assume that you have two select dropdowns in your page.

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

The first one contains the builders, so it will have id="builders".

第二个包含区域，因此它将具有id="regions".

The second one contains the regions, so it will have id="regions".

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

From what I understand, the first select will be exactly the one you posted in your question, generated server-side (by PHP). I only ask that you please make a slight change on it, making each option value be equal to the builder's database ID, and not its name (unless the builder's primary key is their name, and not an ID). This will make no difference for the final user but will be important for our jQuery solution. The second one will be empty, as the idea is to fill it dynamically with the regions related to the builder selected in the first dropdown.

现在让我们进入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中的工作方式.

Despite any syntax errors (can't test the code from here) this should do the trick. Hope the comments were clear enough for you to understand how things work in jQuery.

这篇关于更改第一个选择的第二个选择的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！