根据所选的删除列表项动态填充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="$">

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

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>

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查询。