【问题标题】：jQuery chained select options overwriting default options on loadjQuery 链式选择选项覆盖加载时的默认选项
【发布时间】：2012-07-03 09:15:28
【问题描述】：

问题

如何在用户采取行动而不是加载时触发此序列？

背景

我有三个链接在一起的<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 Plugin 来完成此操作。具体来说，我使用的是“远程”版本的 API (source code)。

<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>

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

关于如何避免在页面加载时获取新的选择选项以及仅在用户实际更改选择选项时这样做的任何建议？我尝试在$(selectID).change() 中调用remoteChained() 函数，但遇到了导致堆栈超载的递归问题，因此不起作用。

提前感谢您提出的任何想法。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

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

/* Force updating the children. */
$(this).trigger("change");

【讨论】：