javascript - 如何使用下拉列表填充文本框

Question

请帮助我..我有从数据库表中填充的下拉列表，现在我想从数据库列表中填充文本框...

我有一张 table

id |果汁|卢比

现在，当我从下拉列表中的果汁列中选择芒果汁时，它应该通过从卢比列检索来在文本框中显示芒果汁的成本

这是从表格中填充的下拉列表

<select name="drink" id="drinkid">
<option id="0">-- Select the drink --</option>
<?php
require("dbcon.php");
$getalldrinks = mysql_query("SELECT * FROM tableone");
while($viewalldrinks = mysql_fetch_array($getalldrinks)){
?>
<option id="<?php echo $viewalldrinks['id']; ?>"><?php echo $viewalldrinks['juice'] ?></option>
<?php
}
?>
</select>

这是文本框

<input type="text" name="juicename" id="juiceid" placeholder="Juice">

请帮助我..提前致谢。

Answer 1

1. 首先将 onChange() 事件添加到 select 标记中，以便在每次更改选项时调用函数 fillTextBox()，然后该函数将填充文本框:

   <select name="drink" id="drinkid" onChange="fillTextBox()">
   

2. 现在您必须获取卢比列并使用 data 属性将其存储在每个选项中:

   <option data-rupees="<?php echo $viewalldrinks['rupees']; ?>" id="<?php echo $viewalldrinks['id']; ?>" ><?php echo $viewalldrinks['juice'] ?></option>
   

3. 创建函数fillTextBox()，该函数将按所选选项的rupees值填充文本框:

   function fillTextBox(){
       var myselect = document.getElementById("drinkid");
       var rupees = myselect.options[myselect.selectedIndex].getAttribute("data-rupees");
   
       document.getElementById("juiceid").value = rupees;
   }
   

这应该可以完成工作，希望这会有所帮助。