Question

我有select这样的元素：

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

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

我试过了：

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

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

但我有几个问题：

如果用户因某种原因确实选择option，我的change事件似乎永远不会发生 - 为什么？
如果用户打开了选择框，但随后点击了其页面上的其他位置以关闭选择框（他们实际上没有选择一个选项，因此没有更改）我不知道如何陷阱事件

这是 jsFiddle 。

Answer 1

没有专门针对select展开或展开的事件。你不能单独依靠焦点或模糊，也不能单击。你最好的方法是手动实现它，即

捕获选择
捕获选择
捕获'文件减去选择'的点击事件
维护一个全局变量，以确定是单击选择本身是为了展开还是再次单击以进行折叠。

这一切都取决于你如何巧妙地考虑与你的选择的所有可能形式的互动以及在每种情况下会发生什么。

另一个，有点冗长的方法可以完全摆脱html select，创建你自己的dropdown-like元素组，即一个文本框，当你开始在它上面输入时会闪烁一个隐藏的div或点击它，就像任何那些定制的下拉菜单（即bootstrap-select）一样，你可以很容易地在扩展和崩溃时附加任何触发器或事件，（但我想它会有点过度杀伤：D）

Answer 2

在您的案例中并不容易，但您可以执行以下操作来捕获所有需要的事件：

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

选择框下拉列表的事件？

2 个答案: