我有两个选择菜单,其中一个 $('#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>
最佳答案
嗯,选项
正在更改,但它没有反射(reflect)在插件
创建的selectmenu
中。所以方法之一就是你 destroy
它并重新初始化
selectmenu
如下:
$('#members').html(someMembers).selectmenu('destroy').selectmenu();
<强> DEMO
关于javascript - selectmenuchange 仅在第一个事件上附加对象列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35772669/