selectmenuchange 仅在第一个事件上附加对象列表

Question

我有两个选择菜单，其中一个 $('#parent') 与 $('#members') 菜单中的某些选项相关（通过其 HTML 中的数据属性相关）。我有一个功能可以限制 'members' 中与父菜单中所选选项相关的选项。

脚本

$("#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>

Answer 1

嗯，options 正在发生变化，但它没有反映在 plugin 创建的 selectmenu 中。所以其中一种方法是 destroy 它和 re-initialize selectmenu 如下：

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

DEMO

Answer 2

您也可以使用 selectmenu('refresh') 而不是 selectmenu('destroy') 并重新初始化 select 菜单。刷新听起来比每次都破坏它更好。

我用刷新更新了 Guruprasad Rao 的 fiddle： fiddle

selectmenuchange 仅在第一个事件上附加对象列表

selectmenuchange appending object list only on first event

javascript

jquery

jquery-ui-selectmenu