在弹出窗口关闭之前重置 jQuery Mobile 选择菜单答案

【问题标题】：Resetting jQuery Mobile Select Menus before popup closes在弹出窗口关闭之前重置 jQuery Mobile 选择菜单
【发布时间】：2012-12-20 14:25:36
【问题描述】：

这里是场景——我有两个 jQuery Mobile 弹出窗口，其中只有一个在给定时间显示（而另一个可能尚未显示）。这些弹出窗口中的每一个都有给定不同的虚拟类的 jQuery Mobile 选择，以帮助我找到它们。我需要做的是 - 在弹出窗口关闭之前（我通过 popup('close') 以编程方式这样做）我想重置选择以显示它们的第一个值（这是默认值）。容易，我想。只需发出

$('.selector').val(0).selectmenu('refresh')

但是，这样做会导致错误无法在初始化之前调用 selectmenu 的方法。我想这是因为“其他”弹出窗口也具有相同类的选择，并且它们当时还没有被初始化。

对另一个选择使用不同的虚拟类并不是一个真正的选择，因为我对两个密切相关的弹出窗口使用相同的事件处理代码。

我也试过

$(popupid).find('.selector').val(0).selectmenu('refresh')

但结果相似。当然，有一种可靠的方法可以获取给定类的所有子项并对其进行处理！我以为我只是用 find 做的，但看起来事实并非如此。另一种选择是确定在初始查询后返回的每个项目是否已被初始化，但这似乎也不太容易。非常感谢您对此的帮助。

【问题讨论】：

标签： jquery select mobile initialization reset

【解决方案1】：

我似乎已经养成了回答自己问题的习惯！这是解决方案

回顾

您定义了两个或多个弹出窗口，并且每个弹出窗口都使用一个或多个样式设置为的选择
一个。大屏幕上的 jQuery Mobile 选择和 b。小屏幕上的 MobiScroll 选择
可以通过虚拟类声明轻松识别选择
当弹出窗口关闭时，您要确保选择返回显示其第一个选项

为了更具体，这里有一个例子

<div data-role='popup' id='p_taqa1618A'>
  <select id = 'r_taqa1618A' class='sppp' data-role='none' data-mini='true'>
   <option value='1'>One</option>
   <option value='2'>Two</option>
   <option value='3'>Three</option>
   <option value='4'>Four</option>
   <option value='5'>Five</option>
  </select>
  //other controls inside this popup

<div data-role='popup' id='p_taqa1618B'>
  <select id = 'r_taqa1618A' class='sppp' data-role='none' data-mini='true'>
   <option value='1'>Eins</option>
   <option value='2'>Zwei</option>
   <option value='3'>Drei</option>
   <option value='4'>Vier</option>
   <option value='5'>Funf</option>
  </select>
  //other controls inside this popup

在任何给定时间，只有 taqa1618A 或 taqa1618B 这两个弹出窗口中的一个会打开。在那个时候，另一个可能之前打开和关闭过，也可能没有。

最后一句话的结果是天真地尝试通过重置选择

$('.sppp').val('1').selectmenu('refresh') 将不起作用 - jQuery 会抱怨您正在尝试刷新尚未初始化的选择菜单。在小屏幕上使用的滚动版本也可以。所以这是确实有效的解决方案。

在关闭弹出窗口之前，以编程方式发出

if (600 < $(window).width())
{
 $(popid).find('.sppp').filter('select').val('1').selectmenu('refresh');
} else
{
 $(popid).find('.sppp').filter('select').scroller('setValue','1',true);
}

紧随其后

$(popid).popup('close');

这里有很多微妙的问题，但最需要指出的可能是这一点 - 升级样式的控件最终可能会创建具有相同类的其他元素。例如，当 HTML 选择被升级为 jQuery Mobile 选择菜单时，jQM 添加了一个具有相同类的跨度 - 在本例中为 sppp。

这就是为什么您需要通过 filter('select') 过滤 find('.sppp') 结果

我在执行此操作的过程中发现了一个有趣的事实，这很可能是一个 jQM 错误 - 最后一行

$(popid).popup('close')

即使提供的 popid 错误，它也能正常工作。

【讨论】：