选择菜单更改仅在第一个事件上追加对象列表

selectmenuchange appending object list only on first event

本文关键字：事件 追加 对象 列表 第一个 菜单 选择      更新时间：2023-09-26

我有两个选择菜单，其中一个$('#parent')与$('#members')菜单中的某些选项有关（通过其HTML中的数据属性相关）。我有一个功能来限制"成员"中的选择，因为它们与父菜单中选择的选项相关。

脚本 

$("#parent").selectmenu();
$("#members").selectmenu();
var allMembers = $('#members option'); // keep object list of all of the options for the select menu
$("#parent").on("selectmenuchange", function() {
    var someMembers = [];
    var id = $('#parent option:selected').data('id');
    allMembers.each(function() {
        if ($(this).data('parent-id') == id) {
        someMembers.push($(this))
        }
    });
    $('#members').empty().append(someMembers);
});

目前，这有效，但仅在第一个selectmenuchange事件上 - 这很奇怪，因为在函数中重新创建数组时使用console.log()我可以看到每次都选择了正确的数组，它们只是没有显示在菜单中后续更改。

我无法弄清楚这是selectmenuchange的问题还是empty().append()

.HTML

<select name="members" id="members">
    <option data-id="101" data-parent-id="1">Name1</option>
    <option data-id="102" data-parent-id="1">Name2</option>
    <option data-id="103" data-parent-id="1">Name3</option>
    <option data-id="104" data-parent-id="2">Name4</option>
    <option data-id="105" data-parent-id="2">Name5</option>
    <option data-id="106" data-parent-id="3">Name6</option>
    <option data-id="107" data-parent-id="3">Name7</option>
</select>
<select name="parent" id="parent">
    <option data-id="1">Parent1</option>
    <option data-id="2">Parent2</option>
    <option data-id="3">Parent3</option>
</select>

好吧，options正在发生变化，但它并没有反映在plugin创建的selectmenu中。因此，其中一种方法是destroy它并re-initialize selectmenu如下所示：

$('#members').html(someMembers).selectmenu('destroy').selectmenu();

DEMO

除了selectmenu('destroy')并重新初始化选择菜单之外，您还可以使用 selectmenu('refresh') .刷新听起来比每次都摧毁它更好。

我已经更新了Guruprasad Rao的小提琴：小提琴

相关文章：