世界主要国家地区的JS三级联动(包括国内的省市区三级联动）_国外三级联动,全球三级联动资源-CSDN文库

共5个文件

js：4个

html：1个

5星 · 超过95%的资源需积分: 42 4 浏览量 2015-01-07 11:04:54 上传评论 8 收藏 81KB ZIP 举报

JavaScript（简称JS）是一种广泛用于网页和网络应用的编程语言，尤其在前端开发中起着核心作用。在本文中，我们将深入探讨如何实现一个包括世界主要国家和地区在内的三级联动效果，以及在国内省市区的三级联动功能。这个功能常用于地址选择、区域筛选等场景，可以提供用户友好的交互体验。我们要理解什么是“三级联动”。在UI设计中，三级联动指的是三个下拉菜单之间存在依赖关系：当用户在一个下拉菜单中选择一个选项时，第二个下拉菜单会根据前者的选值动态更新其选项；同样，第二个菜单的选择会影响第三个菜单的内容。在本案例中，我们可能先选择国家，接着是省份或州，最后是城市或区县。实现这个功能的关键在于JavaScript的事件监听和DOM操作。我们需要一个数据结构来存储所有国家、省份和城市的列表，这通常是一个JSON对象。例如： ```json { "China": { "Beijing": ["东城区", "西城区", "朝阳区", ...], ... }, "USA": { "California": ["洛杉矶", "旧金山", "圣迭戈", ...], ... }, ... } ``` 然后，我们可以使用JavaScript的事件监听器监听第一个下拉菜单的`change`事件，当用户做出选择时，更新第二个下拉菜单的选项。同样，第二个下拉菜单的改变也会触发更新第三个下拉菜单的逻辑。在实际编码中，我们可以使用jQuery或者原生JavaScript的DOM API来实现。例如，使用jQuery： ```javascript $("#country").on("change", function() { var country = $(this).val(); var provinces = data[country]; $("#province").html(""); // 清空省份下拉菜单 for (var province in provinces) { $("#province").append(`<option value="${province}">${province}</option>`); } }); $("#province").on("change", function() { var province = $(this).val(); var cities = data[$("#country").val()][province]; $("#city").html(""); // 清空城市下拉菜单 for (var city of cities) { $("#city").append(`<option value="${city}">${city}</option>`); } }); ``` 这段代码首先为国家下拉菜单添加了`change`事件监听器，当用户选择国家后，会根据选定的国家更新省份下拉菜单的选项。接着，省份下拉菜单也添加了类似事件监听器，根据用户选择的省份更新城市下拉菜单。为了实现下拉框的隐藏和显示功能，我们可以使用CSS的`display`属性。默认情况下，下拉框可以设置为`display: none`，当需要显示时，通过JavaScript将其更改为`display: block`。例如： ```javascript $("#showDropdowns").on("click", function() { $("#country, #province, #city").css("display", "block"); }); ``` 在这个例子中，`#showDropdowns`是一个按钮，当点击时，会显示所有的下拉框。总结，实现世界主要国家地区的JS三级联动，我们需要以下步骤： 1. 创建一个数据结构存储所有国家、省份和城市信息。 2. 使用JavaScript事件监听器监听下拉菜单的`change`事件。 3. 根据用户的选择动态更新下拉菜单选项。 4. 实现下拉框的显示和隐藏功能。通过这样的方法，我们可以创建一个灵活且响应式的三级联动选择系统，适用于各种需要地区选择的场景。

资源推荐

资源详情

资源评论

收起资源包目录

worldAddress.zip （5个子文件）

JS三级联动菜单-世界主要国家地区

TestChooseAddress.js 792B

TestAddress.js 80KB

jquery-1.7.2.min.js 93KB

worldAddress.js 44KB

addNewStamp.html 5KB

<!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"> <script type="text/javascript" src="worldAddress.js"></script> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="TestAddress.js"></script> <script type="text/javascript" src="TestChooseAddress.js"></script> <title></title> <style type="text/css"> #body,select { font-size: 9pt; font-family: Verdana; } #a { color: red; text-decoration: none; } #a:hover { text-decoration: underline; } </style> <script type="text/javascript"> var s = [ "s1", "s2", "s3" ]; var opt0 = [ "国家", "省份、州", "地级市、县" ]; function setup() { change(0); } </script> <script type="text/javascript"> function loadProvince(regionId) { $("#id_provSelect").html(""); $("#id_provSelect").append("<option value=''>请选择省份</option>"); var jsonStr = getAddress(regionId, 0); for ( var k in jsonStr) { $("#id_provSelect").append( "<option value='"+k+"'>" + jsonStr[k] + "</option>"); } if (regionId.length != 6) { $("#id_citySelect").html(""); $("#id_citySelect").append("<option value=''>请选择城市</option>"); $("#id_areaSelect").html(""); $("#id_areaSelect").append("<option value=''>请选择区域</option>"); } else { $("#id_provSelect").val(regionId.substring(0, 2) + "0000"); } } function loadCity(regionId) { $("#id_citySelect").html(""); $("#id_citySelect").append("<option value=''>请选择城市</option>"); if (regionId.length != 6) { $("#id_areaSelect").html(""); $("#id_areaSelect").append("<option value=''>请选择区域</option>"); } else { var jsonStr = getAddress(regionId, 1); for ( var k in jsonStr) { $("#id_citySelect").append( "<option value='"+k+"'>" + jsonStr[k] + "</option>"); } if (regionId.substring(2, 6) == "0000") { $("#id_areaSelect").html(""); $("#id_areaSelect").append("<option value=''>请选择区域</option>"); } else { $("#id_citySelect").val(regionId.substring(0, 4) + "00"); } } } function loadArea(regionId) { $("#id_areaSelect").html(""); $("#id_areaSelect").append("<option value=''>请选择区域</option>"); if (regionId.length == 6) { var jsonStr = getAddress(regionId, 2); for ( var k in jsonStr) { $("#id_areaSelect").append( "<option value='"+k+"'>" + jsonStr[k] + "</option>"); } if (regionId.substring(4, 6) != "00") { $("#id_areaSelect").val(regionId); } } } function getCountry() { change(1); var country = document.getElementById("s1"); var province = document.getElementById("s2"); var city = document.getElementById("s3"); var provSelect = document.getElementById("id_provSelect"); var citySelect = document.getElementById("id_citySelect"); var areaSelect = document.getElementById("id_areaSelect"); if (country.value == "中国") { loadProvince('440116'); provSelect.style.display = "block"; province.style.display = "none"; city.style.display = "none"; } else { province.style.display = "block"; provSelect.style.display = "none"; citySelect.style.display = "none"; areaSelect.style.display = "none"; } } function getChinaProv(regionId) { document.getElementById("id_citySelect").style.display = "block"; loadCity(regionId); } function getChinaCity(regionId) { document.getElementById("id_areaSelect").style.display = "block"; loadArea(regionId); } function getProvince() { change(2); var province = document.getElementById("s2"); var city = document.getElementById("s3"); city.style.display = 'block'; } function stampUpload() { var file = document.getElementById("file"); var country = $("#s1"); var state = $("#s2"); var area = $("#s3"); var chinaProvince = $("#id_provSelect").find("option:selected"); var chinaCity = $("#id_citySelect").find("option:selected"); var chinaArea = $("#id_areaSelect").find("option:selected"); if (file.value == "") { alert("请选择一张邮票！") } else if (country.val() == "国家") { alert("请选择一个国家！"); } else if (country.val() == "中国"){ alert(country.val()+","+chinaProvince.text()+","+chinaCity.text()+","+chinaArea.text()); } } </script> </head> <body bgcolor="#E0E0E0" onLoad="setup()" style="margin: 0"> <center> <div> <form name="form1" method="post" enctype="multipart/form-data"> <table id="tab"> <tr> <td><font size="3" face="楷体"></font></td> <td><select id="s1" onchange="getCountry()"><option>请选择国家</option></select></td> <td><select id="s2" onchange="getProvince()" style="display: none"><option>省份、州</option></select> <select id="id_provSelect" name="provSelect" style="display: none" onChange="getChinaProv(this.value);"><option>请选择省份</option></select> </td> <td><select id="s3" style="display: none"><option>地级市、县</option></select> <select id="id_citySelect" name="citySelect" style="display: none" onChange="getChinaCity(this.value);"><option>请选择城市</option></select> </td> <td><select id="id_areaSelect" name="areaSelect" style="display: none"><option>请选择区域</option></select></td> </tr> </table> </form> </div> </center> </body> </html>

评论收藏

内容反馈