DropDown Open上的jquery事件监听器答案

【问题标题】：jquery Event Listener on DropDown OpenDropDown Open上的jquery事件监听器
【发布时间】：2016-01-15 11:57:42
【问题描述】：

拥有这个简单的下拉菜单：

<select id="foo">
   <option>bar</option>
</select>

还有一个像这样的 jQuery 监听器初始化：

$("#foo").on("click", function() {
    console.log("stuff");
});

仅当用户通过选择选项或单击框外关闭下拉菜单时才会触发该事件。当他打开盒子时，有什么方法可以得到事件？

【问题讨论】：

Is there a DOM event that fires when an HTML select element is closed?的可能重复
是的，这有点同一个问题。接受的答案使用 mousedown 事件，这不是很漂亮，但我想我/我们必须处理它。到目前为止谢谢！
我会选择focus。不完全是我想要的，但足够接近。

标签： javascript jquery event-listener

【解决方案1】：

用于此目的的正确事件是change click，每次更改或单击选择输入时都会触发。

$("#foo").on("click change", function(e) {
    $("#output").html("Event type: " + e.target.nodeName);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="foo">
   <option value="1">foooo</option>
   <option value="2">bar</option>
</select>

<div id="output"></div>

【讨论】：

当你真正“改变”（哈哈.. sry）某些东西时，“改变”事件就会触发。例如。您选择“事物”而不是“栏”。但是当您选择“bar”时选择“bar”，或者您甚至打开下拉菜单时，它不会触发。
@Watte 所以我更新了代码以同时触发change 和click，这是你想要的吗？
打开菜单时不会触发事件。 Firefox 开发者版 68.0b10

【解决方案2】：

尝试事件：

show.bs.dropdown

shown.bs.dropdown

https://getbootstrap.com/docs/4.0/components/dropdowns/#events

【讨论】：

【解决方案3】：

    $(document).on('focus', '#foo', function () {
        console.log('Dropdown Open');
    });

为我工作！！

【讨论】：