javascript - 检测与选择框的交互

Question

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

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

Answer 1

如果您可以将事件处理程序附加到选择框选项元素并单击存储其值，我不知道它是否可以从我的头顶开始工作。

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

Answer 2

我认为 focus() 函数会帮助你..试试这个： http ://api.jquery.com/focus/

Answer 3

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

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

然后使用 jQuery，我们以一种在触发时将其值重置为隐藏选项的值的方式绑定change和mousedown事件。mousedownselect

$("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/