在文本字段中显示下拉列表的选定值（javascript）答案

【问题标题】：Display the selected value of a Drop down list in a text field (javascript)在文本字段中显示下拉列表的选定值（javascript）
【发布时间】：2012-05-09 16:34:24
【问题描述】：

例如：这些是下拉列表中的项目。

<select name="cmbitems" id="cmbitems">
    <option value="price1">blue</option>
    <option value="price2">green</option>
    <option value="price3">red</option>
</select>

当用户选择蓝色时，我想在下面的文本字段中显示 price1 的值：

<input type="text" name="txtprice" id="txtprice" onClick="checkPrice()">

感谢您的回答

【问题讨论】：

如果您觉得任何答案都能解决您的问题，请将其标记为正确答案。

标签： javascript forms drop-down-menu

【解决方案1】：

您需要做的就是在 select.onchange 事件处理程序中将输入的值设置为选择的值。

var select = document.getElementById('cmbitems');
var input = document.getElementById('txtprice');
select.onchange = function() {
    input.value = select.value;
}

Here 是一个 jsFiddle 演示的链接

【讨论】：

【解决方案2】：

这是查找当前选定选项、检查其值并使用其显示文本更新您的输入的蛮力方式。就像 Daniele 建议的那样，如果您可以使用 jquery，这将变得非常容易。但是，如果您出于任何原因无法使用 JS 框架，这应该可以满足您的需求。

<select name="cmbitems" id="cmbitems" onchange="updateTextField()">
 ...
</select>
<input type="text" ..... />

<script type="text/javascript">
function updateTextField()
{
    var select = document.getElementById("cmbitems");
    var option = select.options[select.selectedIndex];
    if (option.id == "price1")
    {
        document.getElementById("txtprice").value = option.text;
    }
}
</script>

【讨论】：

【解决方案3】：

$.on('change', '#cmbitems', function() {
    $('#txtprice').val($('#cmbitems option:selected').val());
});

【讨论】：

【解决方案4】：

如果您使用的是jquery，请使用

$('select.foo option:selected').val();    // get the value from a dropdown select

更新（我忘了包括<input> 人口）

首先，在您的 html 文件中包含 jquery。

在<header> 中包含它：

<header>
<script type="text/javascript" src="YOUR_PATH_TO_LIBRARY/jquery-1.7.1-min.js"></script>
</header>

然后

<input type="text" name="txtprice" id="txtprice" onClick="javascript:$('select.foo option:selected').val();">

【讨论】：

对不起，我忘了在 javascript 中提及
这只会为您提供所选元素的值。不会在输入中填充它们。请查看下面的答案以获取更多详细信息。
jquery 是一个 JavaScript 库，旨在让您的生活更轻松！看看它，然后你会发现一种全新的 - 更简单的 - 编码方式。