jQuery世界城市三级联动下拉选择代码_移动端的用html和jq的方式做一个Picker地市级联选择器资源-CSDN文库

共6个文件

js：4个

css：1个

html：1个

需积分: 32 104 浏览量 2018-08-08 11:24:22 上传评论收藏 76KB ZIP 举报

在网页设计中，"三级联动"是一种常见的交互方式，尤其在选择地理位置时，如国家-省份-城市。这个"jQuery世界城市三级联动下拉选择代码"是一个实现这种功能的示例，它允许用户通过三个相互关联的下拉列表来选择全球的国家、省份（或州）以及城市。 `jquery.min.js`是jQuery库的核心文件，它是JavaScript库，提供了简洁易用的API，简化了DOM操作、事件处理、动画和Ajax交互。在这个项目中，jQuery被用来监听用户的选择，同步更新下拉列表，实现联动效果。 `chosen.jquery.min.js`和`chosen.min.css`是Chosen插件的文件，Chosen是一个优秀的下拉选择框增强插件，它可以将传统的HTML select元素变得更为友好和可操作。在这个案例中，Chosen可能被用于美化和优化下拉列表的显示，提供搜索功能，使用户能更快速地找到想要选择的选项。 `location_chs.js`和`area_chs.js`是包含地理位置数据的JavaScript文件，它们可能存储了世界各国、各省份和城市的名称和ID，这些数据被jQuery用来填充和更新下拉列表。`location_chs.js`可能包含了主要的地理位置信息，而`area_chs.js`可能是更具体的城市和地区数据。实现这个功能的关键步骤包括： 1. **加载数据**：当页面加载时，JavaScript读取`location_chs.js`和`area_chs.js`的数据。 2. **初始化下拉列表**：使用Chosen插件创建和初始化三个下拉列表，展示第一级（国家）的数据。 3. **监听事件**：使用jQuery监听第一个下拉列表的`change`事件，当用户选择了一个国家，触发后续操作。 4. **更新数据**：根据用户选择的国家，从`area_chs.js`中筛选出对应的省份数据，填充到第二个下拉列表。 5. **继续联动**：监听第二个下拉列表的`change`事件，更新城市数据，并填充到第三个下拉列表。 6. **错误处理和优化**：添加适当的错误处理机制，确保即使数据不完整或格式错误，也能正常工作。同时，可以考虑增加搜索功能，提升用户体验。这个案例对于学习jQuery、Chosen插件以及如何处理和展示大量地理数据非常有价值。它展示了如何将前端技术与实际业务需求相结合，提供用户友好的交互体验。通过理解并实践这个项目，开发者可以提升自己的前端开发技能，特别是处理动态数据和用户交互的能力。

资源推荐

资源详情

资源评论

收起资源包目录

jQuery世界城市三级联动下拉选择代码.zip （6个子文件）

chosen.jquery.min.js 26KB

area_chs.js 4KB

location_chs.js 88KB

chosen.min.css 10KB

index.html 3KB

jquery.min.js 82KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery世界城市三级联动下拉选择代码</title> <link href='chosen.min.css' rel='stylesheet'> <style type="text/css"> .dept_select{min-width: 200px;} button{ padding: 4px 10px; border-radius: 3px; border: 0; background: #444; color: #fff; } </style> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="chosen.jquery.min.js"></script> <script type="text/javascript" src="area_chs.js"></script> </head> <body><script src="/demos/googlegg.js"></script> <center> <select id="country" class="dept_select"></select> <select id="province" class="dept_select"></select> <select id="city" class="dept_select"></select> <button>提交</button> </center> <script type="text/javascript"> var areaObj = []; function initLocation(e){ var a = 0; for (var m in e) { areaObj[a] = e[m]; var b = 0; for (var n in e[m]) { areaObj[a][b++] = e[m][n]; } a++; } } </script> <script type="text/javascript" src="location_chs.js"></script> <script type="text/javascript"> var country = ''; for (var a=0;a<=_areaList.length-1;a++) { var objContry = _areaList[a]; country += '<option value="'+objContry+'" a="'+(a+1)+'">'+objContry+'</option>'; } $("#country").html(country).chosen().change(function(){ var a = $("#country").find("option[value='"+$("#country").val()+"']").attr("a"); var _province = areaObj[a]; var province = ''; for (var b in _province) { var objProvince = _province[b]; if (objProvince.n) { province += '<option value="'+objProvince.n+'" b="'+b+'">'+objProvince.n+'</option>'; } } if (!province) { province = '<option value="0" b="0">------</option>'; } $("#province").html(province).chosen().change(function(){ var b = $("#province").find("option[value='"+$("#province").val()+"']").attr("b"); var _city = areaObj[a][b]; var city = ''; for (var c in _city) { var objCity = _city[c]; if (objCity.n) { city += '<option value="'+objCity.n+'">'+objCity.n+'</option>'; } } if (!city) { var city = '<option value="0">------</option>'; } $("#city").html(city).chosen().change(); $(".dept_select").trigger("chosen:updated"); }); $("#province").change(); $(".dept_select").trigger("chosen:updated"); }); $("#country").change(); $("button").click(function(){ alert($("#country").val()+$("#province").val()+$("#city").val()); }); </script> <div style="text-align:center;margin:150px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p> <p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人素材</a></p> </div> </body> </html>

评论收藏

内容反馈