JavaScript实现省市二级联动菜单完整代码

作者:青柠时间:2026-10-27 22:35:54浏览:549

本文提供基于JavaScript的省市二级联动菜单完整实现代码。通过定义地区数据结构,利用onchange事件触发城市列表更新,实现省份与城市的动态关联。代码包含HTML表单结构及JS逻辑,适用于需要快速集成地区选择功能的前端项目,支持自定义省份和城市数据扩展。

JavaScript省市二级联动菜单实现代码

代码示例如下:

<html>
<head>
<title>JS省市二级联动菜单,整理收集。</title>
</head>
<body bgcolor="#FFFFFF" alink="#333333" vlink="#333333" link="#333333" topmargin="0"
leftmargin="0" onload="init()">
<form method="post" name="creator" enctype="multipart/form-data">
<script language="javascript" type="text/javascript">
var where = new Array(35);
function comefrom(loca, locacity) { this.loca = loca; this.locacity = locacity; }
function select() {
with (document.creator.province) { var loca2 = options[selectedIndex].value; }
for (i = 0; i < where.length; i++) {
if (where[i].loca == loca2) {
loca3 = (where[i].locacity).split("|");
for (j = 0; j < loca3.length; j++) { with (document.creator.city) { length = loca3.length; options[j].text = loca3[j]; options[j].value = loca3[j]; var loca4 = options[selectedIndex].value; } }
break;
                }
            }
document.creator.newlocation.value = loca2 + loca4;
        }
function init() {
with (document.creator.province) {
length = where.length;
for (k = 0; k < where.length; k++) { options[k].text = where[k].loca; options[k].value = where[k].loca; }
options[selectedIndex].text = where[0].loca; options[selectedIndex].value = where[0].loca;
            }
with (document.creator.city) {
loca3 = (where[0].locacity).split("|");
length = loca3.length;
for (l = 0; l < length; l++) { options[l].text = loca3[l]; options[l].value = loca3[l]; }
options[selectedIndex].text = loca3[0]; options[selectedIndex].value = loca3[0];
            }
        }
</script>
 <font color="#000000"><b>来自:</b> 省份<select name="province" onchange="select()"></select>城市<select
 name="city" onchange="select()">
 </select>
 我在<input type="text" name="newlocation" maxlength="12" size="12" style="font-weight: bold" />
 </font>
 </form>
</body>
</html>
作者最新文章