PHP实现下拉框选值后同步显示对应数据库fldPrice字段

1. 调整PHP函数，为选项携带价格数据 #

修改你的conTroller函数，给每个<option>标签添加data-price属性，把数据库里的fldPrice值存储进去，让前端能直接获取对应价格：

<?php
function conTroller(){
  include("includes/dbh.php");
  $sql = "SELECT * FROM tbl_price WHERE fldPackage='controller'";
  $result = mysqli_query($conn, $sql);
  if($result->num_rows > 0){
    $options= mysqli_fetch_all($result, MYSQLI_ASSOC);
  }
  foreach ($options as $option) { ?>
    <option data-price="<?php echo $option['fldPrice']; ?>">
      <?php echo $option['fldName']; ?>
    </option>
  <?php }
}
?>

2. 修改HTML，给价格显示区域加标识 #

给需要显示价格的<td>设置一个id，方便JavaScript定位它，同时保留下拉框的onchange事件绑定：

<td><b>Electrical package</b></td>
<td>
  <select id="controller-select" class="custom-select" required onchange="ePkg(event)">
    <option selected value="">None</option>
    <?php conTroller(); ?>
  </select>
</td>
<td id="price-display">请选择选项</td> <!-- 这里用来动态显示价格 -->
<td>istL</td>
<td>Select controller</td>

3. 编写JavaScript实现价格同步 #

在HTML页面的<script>标签里添加ePkg函数，当下拉框选项变化时，读取选中选项的data-price值，更新到价格显示区域：

<script>
function ePkg(event) {
  const selectedOption = event.target.options[event.target.selectedIndex];
  const price = selectedOption.getAttribute('data-price');
  const priceDisplay = document.getElementById('price-display');
  
  // 根据选中状态更新显示内容
  priceDisplay.textContent = price ? price : "请选择选项";
}
</script>

完成以上修改后，选择下拉框里的选项时，对应的fldPrice就会自动显示在指定单元格中。

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