JQUERY 根据来自另一个选择元素的输入动态填充“选择”选项答案

【问题标题】：JQUERY Populate "Select" options dynamically based on input from another select elementJQUERY 根据来自另一个选择元素的输入动态填充“选择”选项
【发布时间】：2015-07-31 19:21:00
【问题描述】：

我想根据我在另一个选择元素（下拉框）中选择的内容更改选择元素中的选项。

我的 PHP 页面上有两个选择框（RUNS 和 SAMPLES）。我打算做的是根据使用第一个选择框中选择的选项对数据库执行的查询来更改第二个选择框中的选项。

我的数据库中有一个将“SAMPLES”连接到“RUNS”的表。第一个选择框在页面加载时由一组“RUNS”填充。我希望将属于所选 RUN 的“SAMPLES”填充到 SAMPLES 框中。

HTML 类似于

<select name='run_id' id='run_id>
    <option value='1'>RUN 1</option>
    <option value='2'>RUN 2</option>
    <option value='4'>RUN 3</option>
    <option value='5'>RUN 4</option>
</select>

后端表“sample_runs”具有列 run_id 和 sample_name。我有一个PHP脚本如下，

<?php
mysql_connect("localhost","uname","pwwd");
mysql_select_db("dbname");
$run_id = $_GET['run_id'];
$sql = "select distinct sample_name from samples where run_id = '$run_id'";
$rsd = mysql_query($sql);
while($rs = mysql_fetch_array($rsd)){
    echo '<option value='.$rs['sample_name'],'>'.$rs['sample_name']."</option>";
}
?>

我可以修改 PHP 脚本（简单的部分），但有人可以与我分享一些代码，说明如何根据在 RUNS 框中选择的 run_id 填充示例名称选项。

非常感谢您的帮助。

【问题讨论】：

mysql 方法已被弃用，并且您允许原始输入到您的查询中，这很危险，因为它有 SQL 注入的风险。
猜我应该使用 PDO，但是 jquery 部分的解决方法是什么
您的 HTML 中有一个小错字 -- 您忘记了 '

标签： javascript php jquery mysql autocomplete

【解决方案1】：

如果您的数据集足够小，您可以在页面加载时发送所有数据。通过在 PHP 中构建一个表示整个数据集的 JSON 对象来做到这一点。您可以使用 PHP 的 json_encode 函数来执行此操作：http://php.net/manual/en/function.json-encode.php

一旦您建立了一个 JSON 字符串，您需要将它发送到一些 JavaScript 来处理基于所选 run_id 的示例名称选项的填充。这里有一个很好的讨论：How to pass variables and data from PHP to JavaScript?

最后，您需要编写 JavaScript 来执行必要的 DOM 操作，以更改第二个 HTML 选择框的内容。这是一个例子：Adding options to select with javascript

如果您的数据集太大而无法在单个请求中发送，则您需要构建一个 REST API 以在每次运行被选中时提供数据。

祝你好运！

【讨论】：