jquery - 选择框下拉列表的事件？

Question

我有一个 select 元素，如下所示:

<select>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

我想要的是每次下拉选择框以显示选项时触发一个事件，然后在发生相反情况时触发另一个事件。

我尝试过这个:

$("select").click(function () {
    $("#textMe").val("open");
});

$("select").change(function() {
    $("#textMe").val("closed");
});

但是我有几个问题:

1. 如果用户由于某种原因确实选择了一个选项，那么我的change事件似乎永远不会触发 - 为什么？

2. 如果用户打开选择框，但随后单击页面上的其他位置来关闭选择框(他们实际上没有选择选项，因此没有任何更改)，我不知道如何捕获该情况事件。

---

这是一个 jsFiddle 。

Answer 1

对于您的情况来说并不那么容易，但您可以执行以下操作来捕获所有需要的事件:

jsfiddle

var opened = false;

$("select").on("click", function () {
    if(!opened){
        $("#textMe").val("open");
        opened = true;
    }
});

$("select").on("change", function() {
    $("#textMe").val("change");

    setTimeout(function(){
        opened = false;
    },0);
});

$("body").on("click", function(e) {
    if(!$(e.target).is("select")) {
        $("#textMe").val("OUTSIDE");
        opened = false;
    }
});