社区
脚本语言
帖子详情
python3下面, 在线等待,如何模拟省份-城市-区县三级选择框选择点击。
vping9211
2018-11-25 08:37:44
https://blog.csdn.net/qq_26416195/article/details/81161741,这个链接怎么模拟点击这个选择三级选择框。
...全文
634
1
打赏
收藏
python3下面, 在线等待,如何模拟省份-城市-区县三级选择框选择点击。
https://blog.csdn.net/qq_26416195/article/details/81161741,这个链接怎么模拟点击这个选择三级选择框。
复制链接
扫一扫
分享
转发到动态
举报
AI
作业
写回复
配置赞助广告
用AI写文章
1 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
vping9211
2018-11-25
打赏
举报
回复
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>城市选择实现</title> <link rel="stylesheet" href="style.css"> </head> <body> <div> <fieldset> <legend>按级选中省市县/区</legend> <label for="addr-show02">您选择的是: <input type="text" id="addr-show02"> </label> <div id="addr-choice"> <ul id="title-wrap"> <li value="0">省份</li> <li value="1">城市</li> <li value="2">县区</li> </ul> <div id="show-panel"> <ul id="addr-wrap"> </ul> </div> </div> <button type="button" class="btn met2">确定</button> </fieldset> </div> <!--<script src="city.js"></script>--> <script src="city.js"></script> <script src="method.js"></script> </body> </html> method.js //****************针对第二种方式的具体js实现部分******************// //****************所使用的数据是city.js******************// /*根据id获取对象*/ function $(str) { return document.getElementById(str); } var addrShow02 = $('addr-show02'); //最终地址显示框 var titleWrap = $('title-wrap').getElementsByTagName('LI'); var addrWrap = $('addr-wrap'); //省市区显示模块 var btn2 = document.getElementsByClassName('met2')[0]; //确定按钮 var current2 = { prov: '', city: '', country: '', provVal: '', cityVal: '', countryVal: '' }; /*自动加载省份列表*/ window.onload = showProv2(); function showProv2() { addrWrap.innerHTML = ''; /*addrShow02.value = '';*/ btn2.disabled = true; titleWrap[0].className = 'titleSel'; var len = provice.length; for (var i = 0; i < len; i++) { var provLi = document.createElement('li'); provLi.innerText = provice[i]['name']; provLi.index = i; addrWrap.appendChild(provLi); } } /*************************需要给动态生成的li绑定点击事件********************** */ addrWrap.onclick = function (e) { var n; var e = e || window.event; var target = e.target || e.srcElement; if (target && target.nodeName == 'LI') { /*先判断当前显示区域显示的是省市区的那部分*/ for (var z = 0; z < 3; z++) { if (titleWrap[z].className == 'titleSel') n = z; } /*显示的处理函数*/ switch (n) { case 0: showCity2(target.index); break; case 1: showCountry2(target.index); break; case 2: selectCountry(target.index); break; default: showProv2(); } } }; /*选择省份之后显示该省下所有城市*/ function showCity2(index) { addrWrap.innerHTML = ''; current2.prov = index; current2.provVal = provice[index].name; titleWrap[0].className = ''; titleWrap[1].className = 'titleSel'; var cityLen = provice[index].city.length; for (var j = 0; j < cityLen; j++) { var cityLi = document.createElement('li'); cityLi.innerText = provice[index].city[j].name; cityLi.index = j; addrWrap.appendChild(cityLi); } } /*选择城市之后显示该城市下所有县区*/ function showCountry2(index) { addrWrap.innerHTML = ''; current2.city = index; current2.cityVal = provice[current2.prov].city[index].name; titleWrap[1].className = ''; titleWrap[2].className = 'titleSel'; var countryLen = provice[current2.prov].city[index].districtAndCounty.length; if (countryLen == 0) { addrShow02.value = current2.provVal + '-' + current2.cityVal; } for (var k = 0; k < countryLen; k++) { var cityLi = document.createElement('li'); cityLi.innerText = provice[current2.prov].city[index].districtAndCounty[k]; cityLi.index = k; addrWrap.appendChild(cityLi); } } /*选中具体的县区*/ function selectCountry(index) { btn2.disabled = false; current2.country = index; addrWrap.getElementsByTagName('li')[index].style.backgroundColor = '#23B7E5'; current2.countryVal = provice[current2.prov].city[current2.city].districtAndCounty[index]; } /*点击确定后恢复成初始状态,且将所选地点显示在输入框中*/ btn2.onclick = function () { addrShow02.value = current2.provVal + ' ' + current2.cityVal + ' ' + current2.countryVal; addrWrap.getElementsByTagName('li')[current2.country].style.backgroundColor = ''; }; /*分别点击省市区标题的处理函数*/ document.getElementById('title-wrap').onclick = function (e) { var e = e || window.event; var target = e.target || e.srcElement; if (target && target.nodeName == 'LI') { for (var z = 0; z < 3; z++) { titleWrap[z].className = ''; } target.className = 'titleSel'; if (target.value == '0') { showProv2(); } else if (target.value == '1') { showCity2(current2.prov); } else { showCountry2(current2.city); } } }; style.css /*全局样式*/ * { margin: 0; padding: 0; } fieldset { width: 500px; padding: 20px; margin: 30px; border: 1px solid #ccc; } legend{ font-size: 18px; font-weight: bold; } #addr-show, #addr-show02,#addr-show03{ width: 200px; height: 25px; margin-bottom: 10px; } .btn { width: 80px; height: 30px; border-radius: 4px; border: 1px solid #ccc; outline: none; background-color: #aaa; margin: 0 20px; } .btn:disabled{ background-color:#ccc; } #addr-choice{ border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 10px 0; margin-bottom: 20px; } #title-wrap li,#addr-wrap li{ list-style: none; display: inline-block; text-align: center; cursor: pointer; } #title-wrap li{ width:163px; height: 45px; line-height: 45px; margin-bottom: 10px; } .titleSel{ border-bottom: 2px solid #23B7E5; } #addr-wrap li{ width: 83px; height: 30px; border-radius: 4px; line-height: 30px; font-size: 14px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } #addr-wrap li:hover{ background-color: #23B7E5; }
全国
城市
、城镇联动下拉
选择
框
这种
选择
框
通常包含国家、
省份
、
城市
、
区县
甚至城镇的层级结构,用户可以逐级
选择
,方便地定位到所需的具体地区。在实际应用中,这种功能常见于物流配送、地址填写、地图服务等场景。 实现全国
城市
、城镇联动下拉...
Python3
编写实用脚本程序-省市区镇四级地址库.zip
2. **字典数据结构**:在这个地址库中,数据很可能以字典的形式存储,因为字典可以方便地通过键(如
省份
、
城市
名)来查找对应的值(如
城市
ID、下属
区县
)。掌握字典的创建、访问、修改和遍历是理解这个脚本的关键。 ...
mysql数据库版
城市
三级
联动
在IT领域,
城市
三级
联动是一种常见的前端交互设计,主要用于地理信息的
选择
,如省-市-区的逐级
选择
。在本案例中,我们将探讨如何利用MySQL数据库实现这种功能。MySQL是一个广泛使用的开源关系型数据库管理系统,它...
0514基于Python省市区
三级
地址库.zip
这个名为"0514基于Python省市区
三级
地址库.zip"的压缩包文件提供了一个方便的工具,用于处理中国地区的省市区
三级
地址。本文将深入探讨如何使用Python来管理和操作这样的地址库。 首先,让我们理解什么是省市区
三级
...
Django Admin实现
三级
联动的示例代码(省市区)
例如,当我们
选择
了一个
省份
后,
城市
的列表就会变为该省下的所有
城市
,类似地,
选择
城市
后,
区县
的列表也会相应地更新。 首先,文章提到了通过自定义Admin的模板文件来实现这一功能。这是因为在Django Admin中,...
脚本语言
37,743
社区成员
34,212
社区内容
发帖
与我相关
我的任务
脚本语言
JavaScript,VBScript,AngleScript,ActionScript,Shell,Perl,Ruby,Lua,Tcl,Scala,MaxScript 等脚本语言交流。
复制链接
扫一扫
分享
社区描述
JavaScript,VBScript,AngleScript,ActionScript,Shell,Perl,Ruby,Lua,Tcl,Scala,MaxScript 等脚本语言交流。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
试试用AI创作助手写篇文章吧
+ 用AI写文章