如何在PHP while循环外获取下拉选中项对应的ID与价格？

我明白你的问题了——PHP是服务器端脚本，页面加载完成后它的执行就结束了，所以你直接在循环外echo变量只能拿到最后一条数据，因为循环跑完后变量保留的是最后一次迭代的值。要实现选中下拉项时动态更新显示对应的ID和价格，我们需要结合前端JavaScript来处理客户端的交互，具体步骤如下：

步骤1：修改PHP生成下拉选单的代码 #

我们可以给每个<option>标签添加自定义数据属性（data-id和data-price），把对应的商品ID和价格存进去，这样前端JS就能轻松获取这些值：

<select id="itemSelect">
    <?php
    $select_item_name = "select * from item order by item_name ASC";
    $run_item = mysqli_query($con, $select_item_name);
    while($row=mysqli_fetch_array($run_item)){
        $item_id = $row['item_id'];
        $item_name = $row['item_name'];
        $item_price = $row['item_price'];
        $item_desc = $row['item_desc'];
        // 添加data-id和data-price属性，同时保留原有的value属性
        echo "<option value='$item_desc' data-id='$item_id' data-price='$item_price'>$item_name</option>";
    }
    ?>
</select>

步骤2：添加显示区域 #

在页面你想要展示商品ID和价格的位置，添加一个容器：

<div id="itemDetails"></div>

步骤3：编写JavaScript监听选单变化 #

用JavaScript监听下拉选单的change事件，当用户选中不同选项时，获取对应的ID和价格并更新显示区域：

// 获取下拉选单和显示区域元素
const itemSelect = document.getElementById('itemSelect');
const itemDetails = document.getElementById('itemDetails');

// 初始化显示默认选中项的信息
function updateItemDetails() {
    const selectedOption = itemSelect.options[itemSelect.selectedIndex];
    const itemId = selectedOption.dataset.id;
    const itemPrice = selectedOption.dataset.price;
    itemDetails.textContent = `${itemId} has a price of ${itemPrice}`;
}

// 页面加载时先执行一次，显示默认选中项
window.addEventListener('load', updateItemDetails);

// 监听选单变化事件
itemSelect.addEventListener('change', updateItemDetails);

为什么这样可行？ #

• PHP负责在服务器端生成所有选项和对应的商品数据，把这些数据嵌入到HTML的属性中；
• JavaScript运行在客户端浏览器，能够实时响应用户的选单操作，从选中的option里提取预存的ID和价格，然后动态更新页面内容。

这样就能实现你想要的效果：选中不同商品时，页面其他位置会实时显示对应的ID和价格啦！

内容的提问来源于stack exchange，提问作者thedude12