点击 select，添加选项，然后打开 select 下拉菜单

Question

我一直在尝试 "catch" select 元素上的点击事件，然后根据 DOM 中的一些其他元素动态添加 <option> 字段，然后触发事件以打开 select 元素的下拉列表。

我成功地捕获了点击事件并添加了 <option> 字段。我在使用当前方法打开 select 时遇到问题。我尝试了什么：

$(document).ready(function(){
    $(document).on("mousedown", "#select-box", function(e){
        e.preventDefault();
        
        var options = "";
        $(".some-div").each(function(i, obj){
            var id = $(obj).attr("id");
            options += '<option value="' + id + '">' + id + '</option>';
        });
        
        $("#select-box").html(options);
        
        // - Open the select dropdown here -
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="some-div" id="div1">
<div class="some-div" id="div2">
<div class="some-div" id="div3">

<select id="select-box">
    <option value="" disabled="" selected="">Select Div</option>
</select>

因此，如果您运行该代码段，请单击 select 并在 DevTools 中检查它，它确实具有我需要的动态选项。但我不知道如何真正打开它。 Whosebug 上的一些答案建议使用

手动触发 mousedown 事件

$("#select-box").trigger("mousedown");

但这显然行不通，因为这正是我从一开始就抓住的事件。

如果有人能指出正确的方向，我将不胜感激

Answer 1

我认为您正试图触发默认行为，因此删除

e.preventDefault();

我认为这也会阻止您的代码按照您的想法运行 (?)。我没有看到 3 个 ID 添加到下拉列表中。

点击 select，添加选项，然后打开 select 下拉菜单

Catch click on select, add options, then open the select dropdown

html

javascript

jquery

ecmascript-5

drop-down-menu