HTML--JS 二级联动
2024-10-07 10:51:09
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML--JS 二级联动</title>
<script language="javascript">
var cities=[
["山东省","青岛市","济南市","威海市"],
["安徽省","合肥市","阜阳市","亳州市"],
["河南省","郑州市","新乡市","洛阳市"]
];
function show(val){
for(i=0;i<cities.length;i++){ //循环遍历，一维数组长度
if(cities[i][0]==val){ //一维数组下标为0的元素即省 与下拉菜单值比较
document.getElementById("city").length=1; // city 长度设为1
for(j=1;j<cities[i].length;j++){ //循环遍历，二维数组长度
document.getElementById("city").add(
new Option(cities[i][j])); //给city赋新cities选出的值 }
} }
}
</script>
</head>
<body>
<form action="" method="post" name="myform">
地区:
<select name="area" onchange="show(this.value)" >
<option value="0">=请选择=</option>
<option value="山东省">山东省</option>
<option value="安徽省">安徽省</option>
<option value="河南省">河南省</option>
</select> <select id="city">
<option value="0">=请选择=</option> <!--此处一个长度-->
</select>
</form>
</body>
</html>
最新文章
- js笔记——理解js中的call及apply
- XML学习笔记7——XSD实例
- Objective-C instancetype关键字
- Sublime Text 3快捷键
- [转]JAVA布局模式：GridBagConstraints终极技巧
- 几个命令行命令的总结(node, babel-cli, babel-node)
- HDOJ 1215 七夕节
- AngularJs directive 'transclude' option 详解
- tomcat使用所遇到的问题
- php_linux_centos6.4_安装mysql_apache_php
- VS2010中使用Jquery调用Wcf服务读取数据库记录
- 阿里云服务器Linux CentOS安装配置（11）安装Wordpress
- MyRedis
- JS宽高理解
- document.onkeydown
- ML激活函数使用法则
- Beta阶段敏捷冲刺一
- 性能测试工具jmeter的安装
- loj 10001 种树
- Docker 基础 - Docker 与前端（二）