JavaScript实现支持区号输入的省市二级联动下拉菜单
作者:代码拾荒时间:2026-10-30 17:26:21浏览:308
本文介绍一个基于JavaScript的省市二级联动下拉菜单实现,该组件支持用户手动输入区号以自动匹配并选中对应地区,同时也支持通过选择地区获取区号。代码示例展示了多组选项共用数据源的逻辑,并提供了运行、复制及保存代码的功能按钮,适用于需要快速录入地区信息的Web表单场景。
支持区号输入的省市二级联动菜单实现
该省市二级联动下拉菜单在原有基础上增加了区号输入功能,使得多组选项可以共享同一套数据源。
用户在选择地区后,系统会自动获取并显示对应的区号;反之,如果手动填写区号,系统也会自动选中对应的地区选项。
目前部分地市的区号数据仍在收集中。
<span onclick="inti(0)"> <select name=azone id="azone" onChange="this.value=this.options[this.selectedIndex].value;altcls();inps.value=optn.options[0].value;"> <option value="省份" disabled="disabled">省份</option> </select> <select name=cls id="cls" onChange="if(this.options[0].text!='选择城区')inps.value=this.options[this.selectedIndex].value;"> <option value=0>选择城区</option> </select> <input type="text" id="inps" name="inps" size="5" value="" onkeyup="if(this.value.length>1)inti(0);findarea();"> </span> <span onclick="inti(1)"> <select name=azone id="azone1" onChange="this.value=this.options[this.selectedIndex].value;altcls();inps.value=optn.options[0].value;"> <option value="省份" disabled="disabled">省份</option> </select> <select name=cls id="cls1" onChange="if(this.options[0].text!='选择城区')inps.value=this.options[this.selectedIndex].value;"> <option value=0>选择城区</option> </select> <input type="text" id="inps1" name="inps" size="5" value="" onkeyup="if(this.value.length>1)inti(1);findarea();"> </span> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
作者最新文章
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
JavaScript函数定义的三种方式:声明、表达式与箭头函数
2026-11-05 13:50:55
JavaScript中escape、encodeURI和encodeURIComponent对空格的处理差异
2026-11-05 12:47:23
JavaScript自学路线图:从基础语法到ES6+核心特性
2026-11-05 11:30:32
