填充一个下拉框，基于使用 php、mysql 和 ajax 选择另一个下拉框答案

【问题标题】：populating a dropdown box, based on the selection of another dropdown box using php, mqsql and ajax填充一个下拉框，基于使用 php、mysql 和 ajax 选择另一个下拉框
【发布时间】：2012-06-04 17:00:18
【问题描述】：

我正在尝试根据另一个下拉框中的选择来填充一个下拉框。这是我的 php 代码：

<form id="inventory" method="POST" action="">
   <fieldset>
      <label for="area" >Select Shelf Area</label>
      <select id="area" name="area">
          <option value=""></option>

          <?php $area = $conn->query("
             select substring_index(location, ' ', 1) as area
             FROM location GROUP BY substring_index(location, ' ', 1)");

             while ($row = $area->fetch_assoc()) {
                echo '<option value="' . $row['area'] . '" >' . $row['area'] . '</option>';
             }
          >
      </select><br/>
    </fieldset>
</form>

当我运行我的查询时，一切都很好，但我需要获取这个结果并使用它来填充另一个下拉框（），这里是：

echo "<label for='location' id='label'>Select location:</label>";
echo "<select id='location' name='location'>";
echo "<option value=''>--Select Location--</option>";
$query = "SELECT location_id, location FROM location
    WHERE location LIKE '<value from previous drop down box>'
    ORDER BY location";
$result = $conn->query($query);
while ($row = $result->fetch_assoc()) {
    echo '<option value="' . $row['location'] . '" >' . $row['location'] . '</option>';
}

有什么想法吗？谢谢吉姆

【问题讨论】：

标签： php javascript mysql ajax

【解决方案1】：

可能是您以错误的方式使用了SUBSTRING_INDEX 函数。

在您的第一个 SELECT 中，您可能没有得到任何输出或可能是空白行。

根据website——

SUBSTRING_INDEX(str,delim,count)

返回字符串 str 在 count 出现之前的子字符串分隔符 delim。如果计数是正数，则左边的所有内容最后的分隔符（从左数）被返回。如果计数是负数，最后定界符右侧的所有内容（计数从右边）返回。 SUBSTRING_INDEX() 执行搜索 delim 时区分大小写。

【讨论】：

我从第一个选择中得到了完美的结果，但是我需要使用查询的结果来填充第二个下拉框。

【解决方案2】：

这就是我使用 JavaScript 和 Ajax 解决问题的方法：

$("#area").change (function(){
    $("#acctRecords tbody tr").remove();
    $('#label').show();
    $('#label2').show();
    $('#location').show();
    $('#section').show();

    $.ajax({
        type: "POST",
        async: true,
        url: "area.php",
        dataType:"json",
        data: ({area: $('#area').val()}),
        success: function(data) {
            $('select#location').empty();
            $('select#location').append('<option value="0">Select Option</option>');

            //Populate options of the second dropdown
            for(var x = 0; x < data.id.length; x++) {
                $('select#location').append('<option value="'+data.id[x]+'">'+data.location[x]+'</option>');
            } //end of each function

        } // end of success
    }); // end of ajax call
}); // end of area change function

这篇文章发布到我的 HTML 中：

echo"<label for='location' id='label'>Select location:</label>";
echo"<select id='location' name='location'>";
echo"</select><br />";

完美运行！

【讨论】：