【实践】四联联动 + 更加优化
2016-07-15 12:00
232 查看
上一次看了大神@进击的前端狗 三联联动代码n遍之后终于明白之中的道理所以这次自己决定动手试一试搞一个四联联动,第一次搞好四联联动的时候大神跟我说了一个更优的方案,就是当每一个下拉框的名字变更的时候后面的下拉框就会自动添加上与上一下拉框相对应的值,今天给大家分享一下。
本次认识到新内容
先上html代码
jquery代码
本次认识到新内容
$("#obj")[0].options.length = 0; //这个是清空对象内所有的option元素,jquery的对象是一个数组来的
先上html代码
<div id="wrapper"> <select id="country"> <option>请选择国家</option> </select> <select id="provinse"> <option>请选择省</option> </select> <select id="city"> <option>请选择市</option> </select> <select id="town"> <option>请选择区/县</option> </select> </div>
jquery代码
//题解思路,当初每变更一个区域名的时候就会初始化选择框的内容“请选择.....”,而现在我想将它变成当每变更一个区域名的时候后面的选择框就会自动出现每一个区域对应的名字,怎样做呢?? //首先,当国家名变更时我们先用$("#obj")[0].options.length = 0; 这个语句清空后面的提示内容实现初始化,然后再为后面的选择框添加上内容,具体如下 //开始遍历Data数组(最外层) $.each(Data,function(_country,content1){ $("#country").append("<option>" + _country + "</option>"); }); //当国家名变更的时候 $("#country").change(function(){ //先清空后面选择框的内容 $("#provinse")[0].options.length = 0; $("#city")[0].options.length = 0; $("#town")[0].options.length = 0; //再遍历一次Data数组以作比较 $.each(Data,function(_country,content1){ if($("#country option:selected").text() == _country){ //如果选中的国家名内容与数组里面的第一部分相等就遍历第二部分的内容 $.each(content1,function(_provinse,content2){ $("#provinse").append("<option>" + _provinse + "</option>"); }); //这里开始添加第三部分的内容,同样道理先遍历content1,选中的内容和省名作比较 $.each(content1,function(_provinse,content2){ if($("#provinse option:selected").text() == _provinse){ //如果对上了的话就遍历content2,为第三个下拉框添加内容 $.each(content2,function(_city,_town){ $("#city").append("<option>" + _city + "</option>"); }) //最后是第四部分的内容,也是先遍历content2,选中的市名与_city的内容比较 $.each(content2,function(_city,_town){ if($("#city option:selected").text() == _city){ $.each(_town.split(","),function(){ $("#town").append("<option>" + this + "</option>"); }) } }) } }); $("#provinse").change(function(){ //同理,当省名变更的时候清空市名,区/县名下拉框的内容 $("#city")[0].options.length = 0; $("#town")[0].options.length = 0; $.each(content1,function(_provinse,content2){ //遍历content1,与省名作比较 if($("#provinse option:selected").text() == _provinse){ $.each(content2,function(_city,_town){ $("#city").append("<option>" + _city + "</option>"); }) $.each(content2,function(_city,_town){ if($("#city option:selected").text() == _city){ $.each(_town.split(","),function(){ $("#town").append("<option>" + this + "</option>"); }); } }); $("#city").change(function(){ //当市名发生变更的时候,初始化最后一个区/县名 $("#town")[0].options.length = 0; $.each(content2,function(_city,_town){ if($("#city option:selected").text() == _city){ $.each(_town.split(","),function(){ $("#town").append("<option>" + this + "</option>"); }) }//变更市名的if }) }) }//省名变更的if }); }); }//国家名变更if }) }) });//main函数
相关文章推荐
- 【旧代码整理】代码说明 /project/init.php 部分
- Java中实现文件上传下载的三种解决方案(推荐)
- android 将drawable图片进行缩放
- iOS UILabel高度自适应
- phpstorm快捷键及设置总结
- VS2012 VS2015 的项目配置模板及其目录
- 验证尼科彻斯定理
- DatePickerDialog的简单使用
- Android view中的requestLayout和invalidate方法
- 使用boost读取ini文件
- android缓存数据到本地放在哪儿最好?
- hdu1269
- Android开发——使用ADB Shell命令实现模拟点击(支付宝自动转账实现)
- npm, node版本更新
- FineReport简单使用
- HTML5游戏的迷思
- S110 Soft Device 学习
- 【知识点】浅谈IP地址
- spring mvc RedirectAttributes 的使用
- Android开发——使用ADB Shell命令实现模拟点击(支付宝自动转账实现)