Question

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

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

Answer 1

如果您可以将事件处理程序附加到选择框选项元素并单击存储其值，我不知道它是否会起作用。

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

Answer 2

我发现唯一可行的解决方案是通过将change的值设置为select上的其他值来导致mousedown事件。在标记中，我创建了一个额外的选项（即第一个孩子）并使其隐藏（像往常一样隐藏在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());
    }
});

DEMO： 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);
    }
});

DEMO： http://jsfiddle.net/LzNrS/1/

Answer 3

我认为focus（）函数会帮助你... http://api.jquery.com/focus/

检测与选择框的交互

3 个答案: