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

Question

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

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

谢谢你的回答

Answer 1

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

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

这是 jsFiddle 演示的链接

Answer 2

如果您使用的是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();">

Answer 3

这是查找当前选定选项、检查其值并使用其显示文本更新您的输入的蛮力方式。就像 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>

Answer 4

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