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事件处理程序中将输入值设置为select的值。

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

Here是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());
});

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

4 个答案: