0

我有两个选择菜单，其中一个与菜单$('#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>
4

2 回答 2

1

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

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

DEMO

于 2016-03-03T13:35:06.400 回答
0

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

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

于 2016-08-22T08:04:16.110 回答