jQuery链接选择选项覆盖加载时的默认选项

时间:2012-07-02 01:04:58

标签: javascript jquery html

问题

当用户采取行动而不是加载时,如何才能触发此序列?

背景

我有三个<select>菜单链接在一起:国家,地区,城市。区域中显示的选项取决于在国家/地区中选择的值,城市中显示的选项取决于在区域中选择的值。例如,如果从国家/地区选择“美国”,则区域中的选项将为50个州,依此类推。国家是唯一一直是静态的菜单。根据用户从前面的菜单中选择的内容,动态填充区域和城市菜单选项。选择国家或地区的值时,将从服务器获取其链接子菜单的选项。此过程在$(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>菜单是搜索界面的一部分。此界面会记住用户最近的搜索。比方说,例如,用户最近的搜索是“美国&gt;路易斯安那州&gt;新奥尔良”,页面上的<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()函数,但遇到了重载堆栈的递归问题,所以这不起作用。

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

1 个答案:

答案 0 :(得分:1)

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

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