当用户采取行动而不是加载时,如何才能触发此序列?
我有三个<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()
函数,但遇到了重载堆栈的递归问题,所以这不起作用。
提前感谢您提出的任何想法。
答案 0 :(得分:1)
我发现了问题。源代码下面的这一行强制<select>
元素在加载时刷新。我刚删除它。现在它只在用户进行更改时刷新。
/* Force updating the children. */
$(this).trigger("change");