HTML中select选中时修改input值且不改变select值同步传递产品信息方案

这里提供3种常用实现方式，可根据你的业务需求选择：

方案1：调整option属性存储逻辑（最推荐） #

把价格放到自定义data-*属性中，select的value直接存产品标识，既满足前端联动需求，提交时也能直接传递产品信息：

修改后JS代码： #

function myFunction(e) {
    // 从选中项的data属性拿金额
    const selectedOption = e.target.options[e.target.selectedIndex];
    document.getElementById("myText").value = selectedOption.dataset.amount;
}

修改后HTML代码： #

<select name="productinfo" onchange="myFunction(event)" class="form-control">
  <option value="" disabled selected>Choose Database Type</option>
  <!-- value存产品名，data-amount存对应金额 -->
  <option value="X 1.5" data-amount="26999">X 1.5</option>
  <option value="X 2.5" data-amount="28999">X 2.5</option>
  <option value="X 3.5" data-amount="32999">X 3.5</option>
  <option value="X 4.5" data-amount="35999">X 4.5</option>
</select>

<input type="text" name="amount" id="myText" class="form-control" value="<?php echo (empty($posted['amount'])) ? '' : $posted['amount']; ?>" readonly>

注意：金额去掉逗号避免后续支付接口解析数字出错，如果需要前端展示逗号可单独做格式化处理

方案2：新增隐藏输入框存储产品信息 #

如果不想改动现有select的value逻辑，可以新增隐藏表单域单独存产品标识：

修改后JS代码： #

function myFunction(e) {
    const selectedOption = e.target.options[e.target.selectedIndex];
    // 赋值金额
    document.getElementById("myText").value = e.target.value;
    // 赋值产品信息到隐藏框
    document.getElementById("productInfo").value = selectedOption.text;
}

修改后HTML代码： #

<select onchange="myFunction(event)" class="form-control">
  <option value="<?php echo (empty($posted['productinfo'])) ? '' : $posted['productinfo']; ?>" disabled selected>Choose Database Type</option>
  <option value="26999">X 1.5</option>
  <option value="28999">X 2.5</option>
  <option value="32999">X 3.5</option>
  <option value="35999">X 4.5</option>
</select>

<!-- 新增隐藏的产品信息输入框 -->
<input type="hidden" name="productinfo" id="productInfo" value="<?php echo (empty($posted['productinfo'])) ? '' : $posted['productinfo']; ?>">
<input type="text" name="amount" id="myText" class="form-control" value="<?php echo (empty($posted['amount'])) ? '' : $posted['amount']; ?>" readonly>

方案3：后端做产品映射（最安全） #

涉及支付场景建议优先用该方案，避免前端篡改金额导致资损：

• select的value仅存产品唯一ID/标识
• 表单提交后后端根据产品ID查询对应金额、产品名称，再传给PayU接口
• 前端的金额仅做展示用，最终以后端查询的数值为准

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