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

Question

我有两个选择菜单，其中一个 $('#parent') 与 $('#members') 菜单中的某些选项相关(通过HTML 中的 data 属性)。我有一个功能来限制“成员”中的选项，这些选项与父菜单中选择的选项相关。

脚本

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

嗯，选项正在更改，但它没有反射(reflect)在插件创建的selectmenu中。所以方法之一就是你 destroy 它并重新初始化selectmenu如下:

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

<强> DEMO