如何使用下拉列表填充文本框答案

【问题标题】：How to fill Textbox using dropdownlist如何使用下拉列表填充文本框
【发布时间】：2015-11-16 07:20:37
【问题描述】：

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

我有一张桌子

标识 |果汁| 高分辨率照片| CLIPARTO卢比

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

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

<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">

请帮助我.. 在此先感谢。

【问题讨论】：

标签： javascript php mysql

【解决方案1】：

首先将onChange()事件添加到您的select标签中，以在每次更改选项时调用函数fillTextBox()，然后该函数将填充textbox：
```
<select name="drink" id="drinkid" onChange="fillTextBox()">
```

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

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

创建函数fillTextBox()，它将用rupees 所选选项的值填充textbox：

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

    document.getElementById("juiceid").value = rupees;
}

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

【讨论】：

【解决方案2】：

您需要使用 javascript 来检测选择框中的更改，存储这些值，然后使用所需的值填充文本框。您尚未在 html 中列出文本框，因此我必须假设我可以使用 input[type=text] 访问此值。鉴于我正在处理不完整的信息，这是您的 javascript 应该是什么样子的近似值。请注意，您可能应该包含一个名为 value 的属性来存储您的 id 而不是使用 id 属性。

var el = document.getElementById('drinkId');
el.addEventListener("click", function(){
    var data = {"id": el.value, "text": el.innerHTML};
    document.querySelectorAll('input[type=text]')[0].value = data.text;
});

如果您想为您的问题提供准确的解决方案，您需要提供更多详细信息和更多代码。

更新：我看到你已经添加了文本框 HTML，所以这里是事件处理程序的更新版本：

var el = document.getElementById('drinkId');
el.addEventListener("click", function(){
    var data = {"id": el.value, "text": el.innerHTML};
    document.getElementById('juiceId').value = data.text;
});

【讨论】：