如何使用下拉列表填充文本框 - How to fill Textbox using dropdownlist

How to fill Textbox using dropdownlist

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

i have one table

id | juice |卢比

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

下面是从表

中填充的下拉列表

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

请帮帮我…提前感谢。

首先将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;
}

应该可以了，希望这对你有帮助。

您需要使用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;
});