JQUERY根據來自另一個選擇元素的輸入動態填充“選擇”選項

Question

我想根據我在另一個選擇元素（下拉框）中選擇的內容來更改選擇元素中的選項。

我的PHP頁面上有兩個選擇框（RUNS和SAMPLES）。 我打算做的是基於使用第一個選擇框中選擇的選項針對數據庫執行的查詢來更改第二個選擇框中的選項。

我的數據庫中有一個表將“ SAMPLES”連接到“ RUNS”。 第一個選擇框由頁面加載時的一組“運行”填充。 我希望將屬於所選“運行”的“樣品”填充到“樣品”框中。

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填充樣本名稱選項。

非常感謝您的幫助。

Answer 1

如果您的數據集足夠小，則可以在頁面加載時發送所有數據。 為此，可以構建一個JSON對象來表示PHP中的整個數據集。 您可以使用PHP的json_encode函數來執行此操作： http : //php.net/manual/en/function.json-encode.php

建立JSON字符串后，您需要將其發送到一些JavaScript，以根據所選的run_id處理樣本名稱選項的填充。 這里有一個很好的討論： 如何將變量和數據從PHP傳遞到JavaScript？

最后，您需要編寫JavaScript來執行更改第二個HTML選擇框的內容所需的DOM操作。 這是一個示例： 添加選項以使用javascript選擇

如果您的數據集太大而無法在單個請求中發送，則需要構建一個REST API來為每次運行選擇時提供數據。

祝好運！！