在开发过程中经常会遇到延迟加载或联动加载的情况,比如前一个下拉列表决定了后一个下拉列表的内容,这种情况在选择邮寄地址中最为常见。
下图就是京东添加收货地址的例子, 后两个select会根据上一个所选的值进行加载和联动:
我们仿照上面的例子来实现一个延迟联动加载地区的demo:
1.新建一个html页面,其中只有三个select下拉列表组件,代码如下:
省份:<select id="province" style="width: 90px;margin: 10px;"></select> 城市:<select id="city" style="width: 90px;margin: 10px;"></select> 区/县:<select id="district" style="width: 90px;margin: 10px;"></select>
代码很简单,创建了三个下来列表组件,分别代表了省份列表、城市列表以及区县列表,从代码中我们可以看到,这三个select并没有option列表项,也就是没有值。
2.编写动态加载列表项js方法,这里用到的是JQuery:
/** * 加载地址 * * @param id * 所选择的id * @param path * 请求路径 * @param selectid * 需要赋值的Select列表 * @param isClean * 是否清空该列表已有值 * @param isAllSelectOption * 是否先加入“全部”option项 * @param isPlsSelectOption * 是否先加入“请选择”option项 * @param defaultValue * 默认值 */ function loadAddress(id, path, selectid, isClean, isAllSelectOption, isPlsSelectOption, defaultValue) { // 如果未定义isClean参数,默认为清空原有数据 if (typeof (isClean) == "undefined") { isClean = true; } // 是否需要清空数据 if (isClean) { $("#" + selectid).empty(); } // 是否加入“请选择”项 if (isPlsSelectOption) { addCustomOption(selectid, 'noSelected', '请选择'); } // 是否加入“全部”项 if (isAllSelectOption) { addCustomOption(selectid, 'all', '全部'); } // get请求,获取数据 if (id != "") { $.get(path, { id : id }, function(data) { if (typeof (data.textContent) == "undefined") { jQuery.each(data, function(i, item) { $("#" + selectid).append("<option value='" + item.value + "'>" + item.name + "</option>"); // 为Select追加一个Option(下拉项) }); if (defaultValue != "undefined" && defaultValue != "" && defaultValue != null) { setSelectedOption(selectid, defaultValue); } } }); } } /** * 添加指定option项 * * @param selectid * @param value * @param name */ function addCustomOption(selectid, value, name) { $("#" + selectid).prepend("<option value='" + value + "' selected = 'selected'>" + name + "</option>"); }
一共只有两个方法,通过addCustomOption方法可以将select列表中添加诸如“全部”、“请选择”这样的初始选项或根据需要自定义选项。
loadAddress方法中id是需要传递的查询参数,比如当从省份列表中先选择了“北京”,此时代表北京的option的value为1,则把此id传递给loadAddress方法,通过loadAddress方法查询id为1的所有下属城市或区县。
完成后的代码即为:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>动态延迟加载select</title> </head> <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript"> /** * 加载地址 * * @param id * 所选择的id * @param path * 请求路径 * @param selectid * 需要赋值的Select列表 * @param isClean * 是否清空该列表已有值 * @param isAllSelectOption * 是否先加入“全部”option项 * @param isPlsSelectOption * 是否先加入“请选择”option项 * @param defaultValue * 默认值 */ function loadAddress(id, path, selectid, isClean, isAllSelectOption, isPlsSelectOption, defaultValue) { // 如果未定义isClean参数,默认为清空原有数据 if (typeof (isClean) == "undefined") { isClean = true; } // 是否需要清空数据 if (isClean) { $("#" + selectid).empty(); } // 是否加入“请选择”项 if (isPlsSelectOption) { addCustomOption(selectid, 'noSelected', '请选择'); } // 是否加入“全部”项 if (isAllSelectOption) { addCustomOption(selectid, 'all', '全部'); } // get请求,获取数据 if (id != "") { $.get(path, { id : id }, function(data) { if (typeof (data.textContent) == "undefined") { jQuery.each(data, function(i, item) { $("#" + selectid).append("<option value='" + item.value + "'>" + item.name + "</option>"); // 为Select追加一个Option(下拉项) }); if (defaultValue != "undefined" && defaultValue != "" && defaultValue != null) { setSelectedOption(selectid, defaultValue); } } }); } } /** * 添加指定option项 * * @param selectid * @param value * @param name */ function addCustomOption(selectid, value, name) { $("#" + selectid).prepend("<option value='" + value + "' selected = 'selected'>" + name + "</option>"); } </script> <script type="text/javascript"> $(function() { //初始化,加载所有省份至province列表 loadAddress('all',加载所有省份方法Path, "province", true,false,true); }); </script> <body> 省份:<select id="province" style="width: 90px;margin: 10px;" onchange="loadAddress($("#province").val(),根据省份id查询城市方法Path, "city", true,false,true);"></select> 城市:<select id="city" style="width: 90px;margin: 10px;" onchange="loadAddress($("#city").val(),根据城市id查询区县方法Path, "district", true,false,true);"></select> 区/县:<select id="district" style="width: 90px;margin: 10px;"></select> </body> </html>
相关推荐
vue实现的下拉触底请求数据,页面一次只加载几个页面,当滑倒底部的时候在重新请求数据,加载页面。...下拉列表,底部触发,分页请求,数据加载,渲染页面。延时请求,多次请求。列表渲染,新闻渲染,商品渲染。
React多选下拉 :collision: :collision: :collision: 用于组件延迟加载的React库。 小而高效。 :collision: :collision: :collision:描述一个React组件,提供具有多种功能的多选功能,例如选择限制,CSS自定义,复选...
Excel 甘特图 模板 主要修改内容如下: ...5 根据工期自动调整页数,在下拉列表中选择页面 6 通过紧前关系与正负延时控制子项目开完工日期,方便网络计算 7 调整当前数据日期自动通过工期数计算计划%
主要修改内容如下: a. 版面调整与美化 ... 根据工期自动调整页数,在下拉列表中选择页面 f. 通过紧前关系与正负延时控制子项目开完工日期,方便网络计算 g. 调整当前数据日期自动通过工期数计算计划%
-修正extjs最新版本(v3.2.2)中的一个bug,如果下拉列表中存在两个相同的Text,则SelectedValue返回值永远是第一个Text的值(feedback:ben.zhou)。 -应用补丁#6593, #6621(feedback:vbelyaev)。 +修正IE7下Grid分页...
-重新设计模拟树的下拉列表的实现,避免选中某项后的闪烁。 +2009-11-21 v2.1.5 +Tree优化。 -修正Expanded项和Checked项的状态在回发改变后不能保持的BUG。 -GetNodeById更名为FindNode,保持和...
只需从下拉列表中选择该选项,并在设置完所有内容后,单击“保存”即可开始加载文本文件的过程。 每行将是一个单独的事件,并且每个事件都将每天安排。 在没有安排任何活动的任何日子中输入“ [SKIP]”。 使用...
只需从下拉列表中选择该选项,当一切设置完毕后,单击“保存”开始加载文本文件的过程。 每条线路将是一个单独的事件,每个事件将每天安排一次。 对于不应安排任何活动的任何日期,请输入“[SKIP]”。 使用“修改”...
●“友情列表”标签设置参数 picExist="true" 时前台查看友情链接列表内容页会出错。 ●作者列表页模板中的“作者列表”标签参数exhibitStyle调用错误。 ●“首页头条图文列表”链接打开方式不受到节点控制。 ●...
2.列表页导航分页加入超过100分页时,下拉选择自动变成文本框输入,防止下拉项太多而影响速度 3.纠正文章管理因异常栏目信息,而造成页面错误 4.生成的缓存文件加入和%>字符的编码,防止因配置内容含asp代码而造成...
缩略图片延迟加载(lazyload),提高页面加载速度; 手机端底部固定浮动栏,可添加拨号联系等选项; 自动获取文章首张图片作为缩略图; 边栏滚动到底部后固定位置功能; 微信分享显示描述、缩略图功能; 支持手机分享图片...
在下拉列表中保持正确的顺序 固定滑块位置(长度) 添加终止按钮 实施更新通知程序 将其打包为OSX应用 从仓库自动下载所需的二进制文件 迁移从wget到curl的各种下载 查看每个按键照明,似乎很难 根据...
全站图片延迟加载 √ 全站图片延迟加载,使网站打开速度更快 首页品牌推荐 √ 首页品牌推荐显示 首页楼层异步加载 √ 首页楼层异步加载,使网站打开速度更快 首页猜你喜欢 √ 布瀑流加载技术显示,下拉位置才加载...
6.6.html 多级下拉列表联动。 6.7.html 各种使用JavaScript获取复选框值的方法。 6.8.html JavaScript控制复选框。 6.9.html 复选框的JavaScript特效。 6.10.html JavaScript取单选框的值。 ...
此应用程序利用延迟加载的功能Angular功能模块。 注册是默认模块。 您可能需要节点12和Angular 11以避免错误。 确保安装npm和angular cli。 使用命令行工具转到项目的根目录(即enrollment-ui文件夹),然后运行npm ...
8,改进了播放列表下拉菜单的长度有时因添加内容名称过长导致名称的遮挡现象,这次播放列表可以根据添加内容的名称自动伸缩长度,但有最大值的限制,不是无限变长!9,彻底的修正了由于Realone的插件不稳定性,导致...
4.4.1 hover()方法 4.4.2 toggle()方法 4.5 移除事件 4.6 其他事件 4.6.1 方法one() 4.6.2 方法trigger () 4.7 表单应用 4.7.1 文本框中的事件应用 4.7.2 下拉列表框中的事件应用 4.8 ...
8,改进了播放列表下拉菜单的长度有时因添加内容名称过长导致名称的遮挡现象,这次播放列表可以根据添加内容的名称自动伸缩长度,但有最大值的限制,不是无限变长!9,彻底的修正了由于Realone的插件不稳定性,导致...
8,改进了播放列表下拉菜单的长度有时因添加内容名称过长导致名称的遮挡现象,这次播放列表可以根据添加内容的名称自动伸缩长度,但有最大值的限制,不是无限变长!9,彻底的修正了由于Realone的插件不稳定性,导致...