javascript - 使 .selectedIndex 与 JQuery Mobile 框架中的选择框一起使用时出现问题

Question

我有一系列选择的保管箱设置，其内容根据前面的选择动态更新。串联选择效果很好。

当我尝试返回顶部并重新开始时，即使我已尝试使用重置所有子项

my_select.selectedIndex = 0;

子选择框保持不变。我原以为这是一个 Javascript 错误，但发现 JSFiddle 示例实际上有效，但我在 JQuery mobile 中的代码不起作用 - 让我相信这是一个 JQuery Mobile 相关问题

您可以在 http://jsfiddle.net/vinomarky/xfcdF/ 查看 JSFiddle 示例。

复制步骤:

1. 从类型中选择“外壳”
2. 从 OD 中选择 5
3. 将类型更改为管道

JSFiddle 示例的行为应有 - 将子级重置为“-”，而我的“实时”JQuery Mobile 示例则不然

有什么想法可以解释为什么吗？

Answer 1

您在 jQuery Mobile 背后操作 DOM，但从未告诉 jQuery Mobile 发生了任何变化。

您需要调用 refresh method更改基础 <select> 后:

refresh update the custom select

This is used to update the custom select to reflect the native select element's value.If the number of options in the select are different than the number of items in the custom menu, it'll rebuild the custom menu.

所以你需要添加这样的东西:

$('#od').selectmenu('refresh');

位于更改处理程序的底部。当然，要刷新的元素取决于您所在的更改处理程序。

演示:http://jsfiddle.net/ambiguous/n3VXe/

你的 fiddle 工作得很好，因为它根本没有使用 jQuery Mobile。

此外，您不应该使用 onchange在 2012 年，您正在加载 jQuery，因此您应该使用它来将处理程序绑定(bind)到您感兴趣的事件。您可能还想用 jQuery 替换所有直接 DOM 操作。