javascript - 尝试刷新下拉菜单

Question

我有一个带有下拉列表的按钮，我正在尝试使用 jquery 刷新该按钮(在提交中)，以便更新其下拉列表以显示新项目。

<button type="button" tabindex="-1" class="fr-command fr-btn fr-dropdown" data-cmd="itemAttributeKey">
<i class="fa fa-text-height"></i>
</button>
<div class="fr-dropdown-menu" style="left: 597px; top: 37px;">
</div>

该按钮用于所见即所得插件(它将文本添加到编辑器中)。我刚刚从 chrome 检查编码编辑器中获得了上面的编码，这就是我能找到的按钮的全部内容。

此代码在提交表单时运行。

$(".fr-dropdown").load(location.href + " .fr-dropdown");

问题是它只是破坏了下拉列表，而不是重新加载它来添加更新的项目。

我有 $("#key-name-list").load(location.href + "#key-name-list"); 转到 key-name- list div，它会很好地更新该 div 中的 li 项目，但我无法刷新所见即所得编辑器按钮下拉列表以显示新项目。

我对 jquery 或 js 不太了解，所以这就是我所拥有的所有信息。我可能错过了一些东西。提交表单时运行的代码有什么问题吗？为什么它会破坏下拉列表而不是完全刷新它。

更新

这是对 @Guffa 答案的编辑。你说的很有道理，我是在复制很久以前的代码，不记得它是如何工作的，它只是有与我需要的类似的功能，所以我使用了它。

使用您的编码，我得到的结果与表单提交之前的结果类似

以及之后。

请注意它如何破坏按钮使其不再显示。

(将其作为更新，因为我想添加图像)

Answer 1

load method不会替换元素，而是将内容放置在元素内，因此这两个代码实际上都是不正确的。对于列表，它不会失败，因为它在 div 内添加了另一个 div。

您应该仅从加载的数据中获取内容，而不是元素本身:

$("#key-name-list").load(location.href + " #key-name-list li");

和:

$(".fr-dropdown").load(location.href + " .fr-dropdown option");