//html代码 <select id="provice"> <option>请选择省</option> </select> <select id="city"> <option>请选择市</option> </select> <select id="county"> <option>请选择区/县</option> </select> js代码 var myId = function(id) { return document.getElementById(id); } //省份 var arr_provice = ['安徽省', '福建省', '贵州省']; //市区 var arr_city = [ ['阜阳市'], ['厦门市', '晋江市'], ['黔西南布依族苗族自治州', '贵阳市'] ] //区县 var arr_county = [ [ ['太和县', '颍州区'] ], [ ['海沧区'], ['安海县'] ], [ ['晴隆县'], ['修文县'] ] ]; //选择省份 for (var i = 0; i < arr_provice.length; i++) { var myProvince = arr_provice[i]; myId("provice").appendChild(new Option(myProvince)); } //选择相应的市区 myId("provice").onchange = function() { //初始化市县 myId("city").options.length = 1; myId("county").options.length = 1; //使选择下拉框内容的index与数组的下标对应相等; pro_index = myId("provice").selectedIndex - 1; if (pro_index > -1) { //填入相应的市区 for (var i = 0; i < arr_city[pro_index].length; i++) { var myCity = arr_city[pro_index][i]; myId("city").appendChild(new Option(myCity)); } } } //选择相应的区县 myId("city").onchange = function() { //初始化选项 myId("county").length = 1; var mar_index = myId("city").selectedIndex - 1; if (mar_index > -1) { for (var i = 0; i < arr_county[pro_index][mar_index].length; i++) { var myCounty = arr_county[pro_index][mar_index][i]; myId("county").appendChild(new Option(myCounty)); } } }
远离javascript/jquery纯css3实现多级导航栏联动
标签: 多级联动
上面是“js原生三级省市县联动”的全面内容,想了解更多关于 js 内容,请继续关注web建站教程。
当前网址:https://ipkd.cn/webs_76.html
workflows工作流
- 一个时间旅行女人的神秘剪影ComfyUI工作流
- 一个可爱的人形小机器人和一只蜗牛在森林
- 雪地里一只可爱的小老虎
- 一只外星甲壳虫子ComfyUI工作流
- 一桌精致的美食,桌上几杯白葡萄酒
- 一位身着传统红色服装的女战士ComfyUI工作流
- 令人着迷的一只老虎ComfyUI工作流
- 树上挂着一只快乐的小樱桃
猜你喜欢
声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!