根据下拉列表项选择从MySQL动态填充多个输入字段

Question

我在网站中搜索了这个问题，但找不到答案。这就是我想做的事情：

用户从下拉列表中选择一系列选项之一

两个输入字段更改以反映此选择，用从我的数据库中提取的数据填充输入框

请参见下面的图像，以便更好地理解： 我知道我需要JavaScript来解决这个问题，但我的JS技能不太好（而且我认为我今天大脑暂时失灵了）！

以下是我目前拥有的代码（不必担心过时的PHP）：

<select name="item" id="item">

<?php
while($row = mysql_fetch_array($result)) {
    $item_id = $row['item_id'];
    $item_category = $row['item_category'];
    $item_title = $row['item_title'];
    $item_price = $row['item_price'];
    $item_description = $row['item_description'];

    echo "<option value=\"".$item_id."\">".$item_title."</option>";
} 
?>

</select>

<script>
function update_txt() {
    price = document.getElementById('item').selectedIndex.value;
    document.getElementById('item_details').value = price;
    document.getElementById('item_price').value = price;
}
</script>

<input id="item_details" type="text" class="validate">
<input id="item_price" type="text" class="validate" value="$">

非常感谢您的帮助！如果您需要任何澄清，请告诉我。 :)

- Sheldon Scott

Answer 1

我会将行进行JSON编码，并将其存储为选项的数据属性，然后在选择更改事件中读取属性。

<select name="item" id="item">
<?php
    while($row = mysql_fetch_array($result)) {
        $item_id = $row['item_id'];
        $item_title = $row['item_title'];
        echo "<option value=\"".$item_id."\" data-json='" . json_encode($row) . "'>".$item_title."</option>";
    } 
 ?>
</select>
<input id="item_details" type="text" class="validate">
<input id="item_price" type="text" class="validate" value="$">

<script>
    $('#item').on('change', function() {
        var selected = $(this).find('option[value="' + $(this).val() + '"]').data('json');
        $('#item_details').val(selected.item_description);
        $('#item_price').val(selected.item_price);
    });
</script>

- dave

---

啊，数据属性！谢谢你！我之前不知道这个功能。听起来它会完美地工作。 :) - Sheldon Scott

如果 $row 是通过 $result = $conn->query($sql); 和 $row = $result->fetch_assoc() 的组合获得的，应如何修改代码？结果 json 的格式也会有所不同。 - ggna

Answer 2

您可以使用PHP、AJAX和JavaScript（或jQuery）的组合。

一般思路如下：

1.用户选择一个或多个选项

2.Javascript用于检测选择和所选选项

3.AJAX获取所选选项，格式化并将其传递给PHP“页面”

4.PHP执行SQL查询并传回值

5.AJAX获取这些值，并使用标准JavaScript方法填充当前页面

这里有一个很好的教程，展示了它们如何配合使用：http://www.tizag.com/ajaxTutorial/ajax-mysql-database.php。不过我建议使用预处理语句代替此示例中的SQL查询。

- mongjong