Javascript 在jQuery完全添加所有选项之前防止下拉

我在单击事件时向下拉列表中动态添加选项。我的问题是，在所有选项都添加完毕并且用户可以看到选项的附加之前，下拉列表就会下降

我的代码如下所示

$(document).on('click', '.someDropdown', function(e) {
   $(this).append('<option class="someClass" value="foo">Foo</option>');
});

$（文档）.on（'click'，'someDropdown'，函数（e）{
$（this.append（'Foo'）；
});

如何确保所有选项添加完毕后下拉列表会自动消失？

$（文档）.on（'mousedown'，'.someDropdown'，函数（e）{
$(document).on('mousedown', '.someDropdown', function(e) {
   $(this).append('<option class="someClass" value="foo">Foo</option>');
});

$（this.append（'Foo'）；
});

在选定元素上按下鼠标左键时，会发生mousedown事件

---

该方法会触发mousedown事件，或附加一个函数，以便在mousedown事件发生时运行。

您可以在追加之前隐藏someDropdown，并在追加之后显示它。

我假设您的下拉列表受JS控制，实际上，您的下拉列表有两个单击处理程序：一个用于显示下拉列表，另一个用于附加选项。这是在创造一种竞赛条件。如果你通过css控制你的下拉列表，你可以消除竞争条件并在你的下拉列表显示之前添加选项

$(document).on('click', '.someDropdown', function(e) {
   $(this).append('<option class="someClass" value="foo">Foo</option>');
   $(this).addClass('enabled');
});

$（文档）.on（'click'，'someDropdown'，函数（e）{
$（this.append（'Foo'）；
$（this.addClass（'enabled'）；
});

禁用

它并在附加后启用它。我是在下拉菜单上的click事件之后附加的。单击后禁用有什么用？对于

下拉列表

，您不能使用

单击

。使用

change

事件作为

下拉列表。您的意思是说，除非附加到mousedown的函数没有完成执行，否则click事件不会执行其任务？鼠标按下时触发mousedown，鼠标按下并释放时触发click。Mousedown函数将在单击之前完成执行。非常感谢，这正是我要寻找的。您可能还想添加touchstart，使其对移动友好。我已将单击更改为Mousedown事件以实现此目标。太棒了！可能是更简单的路线：）