二位数组塑造二级联动下拉菜单（静态数据）

最新推荐文章于 2023-07-11 17:32:26 发布

冯索

最新推荐文章于 2023-07-11 17:32:26 发布

阅读量2.5k

点赞数 1

分类专栏： web开发文章标签： js

本文链接：https://blog.csdn.net/wugouzi/article/details/12655277

版权

web开发专栏收录该内容

49 篇文章 0 订阅

订阅专栏

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="JavaScript" type="text/javascript">
//定义城市的二维数组，其中顺序跟省份是一致的
var cityNames = [["济南","青岛","淄博","潍坊"],["合肥","蚌埠","宣城","黄山"]];
function getCity(){
//获得省份下拉框的对象
var selProvince = document.form.province;
//获得城市下拉框的对象
var selCity = document.form.city;
//得到选择省份的城市数组
var proCityNames = cityNames[selProvince.selectedIndex-1];
//清空城市下拉框，仅留提示选项
selCity.length = 1;
//将省份下城市数组中的值填充到城市下拉框中
for(var i=0; i<proCityNames.length;i++){
selCity[i+1] = new Option(proCityNames[i],i+1);
}
}

</script>
</HEAD>
<BODY οnlοad="setValue();">
<FORM METHOD=POST ACTION="" name="form">
<select name="province" onChange="getCity()">
<option value="0">请选择省份</option>
<option value="1" selected>山东</option>
<option value="2">安徽</option>
</select>
<select name="city">
<option value="0">请选择城市</option>
</select>
</FORM>
</BODY>

</HTML>

但此项貌似在修改时的默认选中上不太好实现，用作单独的添加页面还是很高效率的。

冯索

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二位数组塑造二级联动下拉菜单（静态数据）

静态无标题文档 //定义城市的二维数组，其中顺序跟省份是一致的 var cityNames = [["济南","青岛","淄博","潍坊"],["合肥","蚌埠","宣城","黄山"]]; function getCity(){ //获得省份下拉框的对象
复制链接

扫一扫