1

问题

当用户采取行动而不是加载时，如何让这个序列触发？

背景

我有三个<select>链接在一起的菜单：国家、地区、城市。在 region 中显示的选项取决于在 country 中选择的值，在 city 中显示的选项取决于在 region 中选择的值。例如，如果您从国家/地区中选择“美国”，则区域中的选项将是 50 个州，以此类推。Country 是唯一始终保持静态的菜单。区域和城市菜单选项根据用户从前面的菜单中选择的内容动态填充。When values from country or region are selected, the options for their chained sub-menus are fetched from the server. 这个过程在$(selectID).change(). 我正在使用Chained Selects jQuery 插件来完成此操作。具体来说，我正在使用“远程”）。

<select>菜单结构：

<select id="country">
  <option value="0">Select country...</option>
  <option value="1">Country 1</option>
  <option value="2">Country 2</option>
  ...
</select>

<select id="region">
  <option value="0">Select region...</option>
  <option value="1">region 1</option>
  <option value="2">region 2</option>
  ...
</select>

<select id="city">
  <option value="0">Select city...</option>
  <option value="1">city 1</option>
  <option value="2">city 2</option>
  ...
</select>

通过链接 API，<select>菜单链接在一起，$(document).ready()如下所示：

$('#region').remoteChained('#country', 'server.php');
$('#city').remoteChained('#region', 'server.php');

问题

这些<select>菜单是搜索界面的一部分。此界面会记住用户最近的搜索。例如，假设用户最近的搜索是“美国 > 路易斯安那州 > 新奥尔良”，<select>那么页面上的项目最初应该呈现如下（此时链式 API 根本不应该发挥作用）：

<select id="country">
  ...
  <option value="113" selected>United States</option>
  ...
</select>

<select id="region">
  ...
  <option value="1390" selected>Louisiana</option>
  ...
</select>

<select id="city">
  ...
  <option value="17267" selected>New Orleans</option>
  ...
</select>

但最终发生的是，当$(selectID).remoteChained(...)函数被调用时$(document).ready()，区域和城市选择选项被从服务器获取的值覆盖，并且“选定”选项丢失（<option>区域和城市的初始项目的整个列表都丢失了， 实际上）。使用上面保存的搜索示例，三个选择选项中的每一个的选项最初应预先选择为 1) 美国 2) 路易斯安那州 3) 新奥尔良，但改为 1) 美国 2) 选择地区... 3)选择城市... 换句话说，<select>菜单应该只在用户实际更改其中一个值时动态构建，而不是在页面加载时。

关于如何避免在页面加载时获取新的选择选项的任何建议，并且仅在用户物理更改选择选项时才这样做？我尝试过调用该remoteChained()函数，$(selectID).change()但遇到了使堆栈过载的递归问题，所以这不起作用。

提前感谢您可能有的任何想法。

4

1 回答 1

1

我发现了问题。源代码下面的这一行强制<select>元素在加载时刷新。我刚刚删除了它。现在它只在用户进行更改时刷新。

/* Force updating the children. */
$(this).trigger("change");
于 2012-07-03T01:15:28.160 回答