下拉列表选择的文本更改箭头键按下
Posted
技术标签:
【中文标题】下拉列表选择的文本更改箭头键按下【英文标题】：dropdownlist selected text change on arrow key press 【发布时间】：2015-04-26 06:48:39 【问题描述】：我有一个下拉列表。我在该下拉列表上添加了包装类。并且这个类在下拉列表之后添加了跨度以显示选定的文本。
<span class="select-wrapper">
<select name="MethodId" id="Status" class="product-select product-select-js">
<option value="">---Select---</option>
<option value="0">GET</option>
<option value="1">POST</option>
<option value="2">FTP</option>
</select>
<span class="holder">POST</span>
</span>
我想更改下拉列表中选定的文本键盘箭头键（上、下、左、右）按下事件。
但这在 google chrome 中有效，但在 firefox 中无效。我发现这是因为下拉列表的 span 包装器。
有人解决这个问题吗？
【问题讨论】：
因为这个问题是用 jQuery 标记的，所以我没有看到任何 jQuery 代码？ 添加 jquery 我的意思是这应该由 jquery 修复 @user3848036，您好像在请人为您解决问题，但您没有尝试自己解决？尝试一下并发布您的尝试以及遇到的问题 【参考方案1】：所以要分步分解，首先你需要include jQuery on your page。
然后您可以使用 jQuery 将add an event listener 转换为您的drop down box。
然后在事件监听器中你会想要get the value of the drop down box.。
那你会想set the value of your span.
那么你最终会得到类似的东西
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="scripts/jquery-2.1.3.js"></script>
<script>
$(function()
$('#Status').on('change keyup', updateValue);
);
function updateValue()
$('.holder').text($(this).find(':selected').text());
</script>
</head>
<body>
<span class="select-wrapper">
<select name="MethodId" id="Status" class="product-select product-select-js">
<option value="">---Select---</option>
<option value="0">GET</option>
<option value="1">POST</option>
<option value="2">FTP</option>
</select>
<span class="holder"></span>
</span>
</body>
</html>
【讨论】：
嗨 workabyte，感谢您的回复。您在 ddl 更改事件中设置了 .holder 值，但是当我们通过键盘的箭头键进行更改时，不会触发 ddl 更改事件。这就是为什么我很难做到那个。 @user3848036 查看我对脚本块的编辑，在 FF 中，更改事件不会触发，直到您使用箭头键更改值时离开 DDL，所以如果您不想这样做更改焦点，然后您将要绑定到 keyup 事件和更改事件以上是关于下拉列表选择的文本更改箭头键按下的主要内容，如果未能解决你的问题，请参考以下文章