JavaScript实现级联菜单的方法
作者:半夏时间:2026-10-29 12:00:27浏览:607
本文介绍了使用JavaScript实现级联菜单的具体方法,通过操作DOM元素和数组数据,实现国家与城市选项的动态联动。
JavaScript实现级联菜单的方法
本文介绍了JavaScript实现级联菜单的具体方法,供读者参考。具体实现代码如下:
<html>
<head>
<title>test</title>
<script type="text/javascript">
function f()
{
var sel=document.getElementById("country");
var sel2=document.getElementById("city");
var cnarr1=new Array("bj","sh")
var cnarr2=new Array("beijing","shanghai")
var usaarr1=new Array("dc","ny")
var usaarr2=new Array("Washington","NewYork")
for(var i=sel2.length;i>=0;i--){
sel2.removeChild(sel2.childNodes[i]);
}
var op=document.createElement("option");
op.value="please";
op.text="please";
sel2.appendChild(op);
if(sel.value=='USA'){
for(i=0;i<2;i++){
op.value=usaarr1[i];
op.text=usaarr2[i];
sel2.appendChild(op);
}
}
else if(sel.value=='CN'){
for(i=0;i<2;i++){
op.value=cnarr1[i];
op.text=cnarr2[i];
sel2.appendChild(op);
}
}
}
</script>
</head>
<body>
<select onchange="f()" id='country'>
<option >please</option>
<option value='USA'>America</option>
<option value='CN'>China</option>
</select>
<select id='city'>
<option >please</option>
</select>
</body>
</html>
希望本文的内容对JavaScript程序设计有所帮助。
作者最新文章
JavaScript闭包与类(Class)的区别及适用场景对比
2026-11-05 15:48:57
JavaScript入门要学ES6吗?let与箭头函数等新特性解析
2026-11-05 14:49:16
JavaScript 8种数据类型详解:基本类型与引用类型的区别
2026-11-05 14:25:15
怎么在JavaScript中使用async/await优化Ajax异步流程
2026-11-05 13:56:15
JavaScript replace回调函数实现动态正则替换逻辑
2026-11-05 13:52:13
