Javascript 使用jQuery更改Select选项的顺序无法正常工作

我有一个朋友帮我编写代码，因为我无法让它正常工作。我正在尝试编辑选择列表项的顺序，因为我无法手动编辑列表，因为列表是在一个名为SellMedia的Wordpress插件中填充的。当前提供的代码可以工作，但当您单击下拉列表时，它可以工作，如果您单击“关闭”并返回，则会更改顺序

有没有办法阻止这种情况发生

$(document).on('click','#sell_media_item_size',function(){

    $("#sell_media_item_size option").slice(1, 19).each(function () {
      var options = $('#sell_media_item_size option');

      $(this).insertAfter($(options[0]));
    });
});

---

这里的示例-

您应该只订购一次。您可以使用全局级别的标志检查是否已对条目排序：

var ordered = false;
$(document).on('click','#sell_media_item_size',function(){

    if (!ordered) {
        $("#sell_media_item_size option").slice(1, 19).each(function () {
            var options = $('#sell_media_item_size option');
            $(this).insertAfter($(options[0]));
        });
        ordered = true; 
    }
});

如果您可以通过其他方式检查它，这样您就不需要全局标志，这会更好

---

更新：我刚刚发现，您可以使用

.one（）

而不是

.on（）

来绑定单击事件。因此，处理程序将只触发一次。

注意，使用eq（0）而不是[0]，这样您就不必重新包装dom元素。问题是您只希望它发生一次？也许您可以在selectbox上使用“change”事件。谢谢@Taplar&Franco，我试过了，没有做任何更改。单击它的原因是，在插件创建弹出窗口之前，元素在页面上不可见，因此单击它可以使jQuery工作。此外，我只想改变正确的顺序点击下拉菜单。请参阅JSFIDLE或示例，但我的站点上的代码呈现方式不同。我不明白，为什么每次单击“打开”下拉列表时都需要订购这些项目？当数据填充时，订购一次还不够吗？我已经尝试过了，但仍然没有成功。我已经添加了一个带有下拉列表的页面，以便您可以在我的网站上看到它的呈现。它确实可以填充，但当你卸载并加载另一个产品时，它只会自行重置。好吧，在你的小提琴中，它似乎可以解决问题：你的网站上的下拉菜单在哪里？转到此链接并单击“购买”按钮以加载弹出窗口中的下拉菜单以查看结果。