本文介绍一个基于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需再刷新一下页面才能执行]