检测与选择框的交互

Detecting interaction with select box

本文关键字：交互 选择 检测      更新时间：2023-09-26
如何

（使用Javascript或jQuery）检测何时从选择框中选择了值，即使它与先前选择的选项相同（即没有触发更改事件）。

主要是我需要这个鼠标交互，但也适用于键盘的解决方案也会很方便。

我认为唯一可行的解决方案是通过将 select 的值设置为 mousedown 上的其他值来引起change事件。在标记中，我创建了一个额外的选项（即第一个孩子）并将其隐藏（像往常一样完美隐藏在Chrome/FF/Safari，IE中）。所以看起来不错。

<select>
    <option style="display: none"></option>
    <option>First</option>
    <option>Second</option>
    <option>Third</option>
</select>​

然后使用 jQuery，我们绑定change并mousedown事件，当mousedown触发时，select将其值重置为隐藏选项的值。

$("select").on({
    change: function() {
        console.log($(this).val());
    },
    mousedown: function() {
        $(this).val($(":first", this).val());
    }
});​

演示：http://jsfiddle.net/LzNrS/

更新：为了在用户单击select但决定不选择任何内容时保留所选值，我们可以稍微修改代码blur添加事件并更新mousedown。

var special = ""; // special hidden option value
var value = ""; // temporary variable
$("select").on({
    change: function() {
        console.log($(this).val());
    },
    mousedown: function() {
        if (this.value == special) {
            $(this).val(value);
            return;
        }
        value = this.value;
        $(this).val(special);
    },
    blur: function() {
        if (this.value == special)
            $(this).val(value);
    }
});​

演示：http://jsfiddle.net/LzNrS/1/

我不知道如果

您可以将事件处理程序附加到选择框选项元素并在单击时存储其值，它是否会从我的头顶上工作。

适用于鼠标，不适用于键盘 http://jsfiddle.net/w4DEJ/4/

我认为focus（）函数会对你有所帮助。试试这个：http://api.jquery.com/focus/

相关文章：