javascript - 单击选择，添加选项，然后打开选择下拉列表

Question

我一直在尝试“捕获”选择元素上的单击事件，然后添加 <option>字段动态地基于 DOM 中的其他一些元素，然后触发一个事件来打开选择元素的下拉列表。

我成功捕获了点击事件并添加 <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

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

e.preventDefault();

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