根據從選擇框中選擇的item_ID從MySQL檢索數據

Question

我有一個填充的MySql數據庫，我的數據庫有兩列（item_ID，item_title），我的HTML頁面有一個選擇框，所有的item_ID都存儲在其中，在它的下面有一個輸入框，現在我要執行以下操作：當用戶從選擇框中選擇一個item_ID時，它應該轉到數據庫並找出屬於該item_ID的item_title是什么。 我目前正在使用PHP，但我不知道如何執行此類任務。 先感謝您。

注意：我可以使用所有可用的item_ID填充選擇框。 我不確定如何實現的唯一事情就是隨着item_ID的變化動態地檢索item_title，並顯示在輸入框中。

<select name='item_ID'>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

<input name='item_title' value='Should change as the item_ID changes' />

Answer 1

假設您使用PHP動態生成了select元素：

<?php

    while($row = mysql_fetch_assoc($some_query)) {
        echo "<option>" + $row["id"] + "</option>";
    }

?>

對？ 但是，現在為什么不在同一查詢中添加title並生成title呢？

echo "<option data-title='" + $row["title"] + "'>" + $row["id"] + "</option>";

很好，因此您的選擇將如下所示：

<select name='item_ID'>
    <option data-title="Title 1">1</option>
    <option data-title="Title 2">2</option>
    <option data-title="Title 3">3</option>
    <option data-title="Title 4">4</option>
</select>

現在，您將change事件綁定到選擇上，如下所示：

$("#item_ID").on("change", function(e) {
    var selectedOption = $("option:selected", this);
    $("#item_title").val($(selectedOption).data("title"));
});

不要忘記在標題字段中添加id="item_title" 。

因此，通過這種方法，您無需在數據庫中進行額外的請求和查詢，就可以通過將其添加到用於創建select的同一查詢中來獲得標題（如果來自另一個表，則使用inner/left join ，我認為）。 因此，它將提高您的應用程序性能。

更新：

事件綁定應保留在document的ready事件上，如下所示：

$(document).ready(function() {
    $("#item_ID").on("change", function(e) {
        var selectedOption = $("option:selected", this);
        $("#item_title").val($(selectedOption).data("title"));
    });
});

對於更多列，您只需將它們與data-前綴添加到option元素屬性中：

<option data-title="" data-other-property=""></option>

依此類推...然后使用相同的方法訪問它：

$(selectedOption).data("title");
$(selectedOption).data("other-property");

考慮到selectedOption代表option元素。

一些參考值得一讀：

• 使用數據屬性@ MDN

• $（document）.ready（）@ jQuery學習中心