Catch单击选择，添加选项，然后打开选择下拉菜单

Question

我一直试图“捕获”选择元素上的click事件，然后根据DOM中的其他元素动态添加<option>字段，然后触发事件以打开选择元素的下拉列表。

我成功设法捕获了点击事件并添加了<option>字段。我在使用当前方法打开选择时遇到麻烦。我试过的：

$(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>

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

手动触发mousedown事件

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

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

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

Answer 1

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