试图刷新下拉列表

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>

该按钮用于WYSIWYG插件（它将文本添加到编辑器中）。我刚从chrome检查编码编辑器获得了上面的代码，这就是我能找到的按钮。

此表格在提交表格时运行。

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

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

我$("#key-name-list").load(location.href + " #key-name-list");转到key-name-list div，它更新了该div中的li项，但我无法通过WYSIWYG编辑器按钮下拉列表进行刷新以显示新项目。

我对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");