如何在不更改 select 框值的情况下选择选择框时更改 html 中的输入框值

Question

我正在尝试将 payu 支付网关集成到我的网站中，因此当用户在我的表单中选择产品信息时，金额应相应更改，我已完成以下操作：

 function myFunction(e) { document.getElementById("myText").value = e.target.value }

 <select name="productinfo" onchange="myFunction(event)" class="form-control"> <option value="<?php echo (empty($posted['productinfo']))? '': $posted['productinfo']; ?>" disabled selected>Choose Database Type</option> <option value="26,999">X 1.5</option> <option value="28,999">X 2.5</option> <option value="32,999">X 3.5</option> <option value="35,999">X 4.5</option> </select> <input type="text" name="amount" id="myText" class="form-control" value="<?php echo (empty($posted['amount']))? '': $posted['amount']; ?>" readonly>

这里的金额正在根据产品 select 进行更改，我可以通过它来支付，我想要的是产品信息也像 value="X2" 一样在表单中传递，有什么办法可以做到这一点，请帮助， 提前致谢

Answer 1

在这里试试这个：

 function myFunction(e) { document.getElementById("myText").value = e.options[e.selectedIndex].getAttribute('data-price'); }

 <select name="productinfo" onchange="myFunction(this)" class="form-control"> <option value="<?php echo (empty($posted['productinfo']))? '': $posted['productinfo']; ?>" disabled selected>Choose Database Type</option> <option value="X 1.5" data-price="26,999">X 1.5</option> <option value="X 2.5" data-price="28,999">X 2.5</option> <option value="X 3.5" data-price="32,999">X 3.5</option> <option value="X 4.5" data-price="35,999">X 4.5</option> </select> <input type="text" name="amount" id="myText" class="form-control" value="<?php echo (empty($posted['amount']))? '': $posted['amount']; ?>" readonly>