问题

Question

问题

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

背景

我有三个<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()函数，但遇到了重载堆栈的递归问题，所以这不起作用。

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

Answer 1

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

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

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

问题

背景

问题

1 个答案: