本文介绍了一种使用纯JavaScript实现的级联下拉菜单功能，即当选择一个省份时，会自动更新显示对应的地市选项。代码示例中包含了初始化省份列表及相应地市的动态加载过程。
实现功能：用两个下拉列表，省份和省份相对应的城市。当点击省份的时候，在第二个下拉列表中自动出现相 对应的城市。该操作称为级联操作。
function a(){
var address = ["广东","江西"];var objSelect = document.getElementById("s"); //通过id=s来获取select对象
for(var i=0;i<address.length;i++){
var objOption = document.createElement("option");
objOption.innerText = address[i];
objOption.value = i+1; //用来级联时获取元素
objSelect.appendChild(objOption);
}
}
function area(){
var objOption1 = document.getElementById("s");
document.getElementById("abc").innerText = "";
if(objOption1.value == 2){
var area1 = ["南昌","九江","吉安","赣州"];
var objSelect = document.getElementById("abc");
for(var i=0;i<area1.length;i++){
var objOption = document.createElement("option");
objOption.innerText = area1[i];
objSelect.appendChild(objOption);
}
}
if(objOption1.value == 1){
var area1 = ["深圳","广州","东莞"];
var objSelect = document.getElementById("abc");
for(var i=0;i<area1.length;i++){
var objOption = document.createElement("option");
objOption.innerText = area1[i];
objSelect.appendChild(objOption);
}
}
}
在index.html中
<body onload="a()">
<select id="s" onchange="area()" ></select>
<select id="abc"></select>
</body>
然后在浏览器中访问你的网页即可出现效果
扫一扫
9979
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
