js入门篇--二维数组创建动态下拉菜单

最新推荐文章于 2023-01-20 14:08:48 发布

qq_41288095

最新推荐文章于 2023-01-20 14:08:48 发布

阅读量922

点赞数

分类专栏： javascript 文章标签： js动态下拉菜单

本文链接：https://blog.csdn.net/qq_41288095/article/details/89052502

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

二维数组创建动态下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>动态改变下拉菜单内容</title>
</head>
<script language=javascript>
 //定义一个二维数组ality，用于存放城市名称
 var aCity = new Array();
 aCity[0] = new Array();
 aCity[1] = new Array();
 aCity[2] = new Array();
 aCity[3] = new Array(); 
 //赋值，每个省份的城市存放于数组的一行
 aCity[0][0] = "--请选择--";
 aCity[1][0] = "--请选择--";
 aCity[1][1] = "广州市";
 aCity[1][2] = "深圳市";
 aCity[1][3] = "珠海市";
 aCity[1][4] = "汕头市";
 aCity[1][5] = "佛山市";
 aCity[2][0] = "--请选择--";
 aCity[2][1] = "长沙市";
 aCity[2][2] = "株洲市";
 aCity[2][3] = "湘潭市";
 aCity[3][0] = "--请选择--";
 aCity[3][1] = "杭州市";
 aCity[3][2] = "台州市";
 aCity[3][3] = "温州市";
 function ChangeCity(){
  var i,iProvinceIndex;
  iProvinceIndex = document.frm.optProvince.selectedIndex;//selectedIndex 属性可设置或返回下拉列表中被选选项的索引号
  iCityCount = 0;
  while(aCity[iProvinceIndex][iCityCount]!=null)
   {iCityCount++;}
  //计算选定省份的城市个数
  document.frm.optCity.length = iCityCount;//改变下拉菜单的选项数
  for(i=0;i<iCityCount-1;i++)
   {document.frm.optCity[i] = new Option(aCity[iProvinceIndex][i]);}
  document.frm.optCity.focus();
  
 }
 </script>
<body ONfocus=ChangeCity()>  //onfocus 事件在对象获得焦点时发生。
 <h3>选择省份及城市</h3>
 <form action="" name="frm">
  <p>省份：
  <select name="optProvince" size="1" ChangeCity()>、
    <option>--请选择--</option>
    <option>广东省</option>
    <option>湖南省</option>
    <option>浙江省</option>
   </select>
  </p>
  <p>城市：
   <select name="optCity" size="1">
    <option>请选择</option>
   </select>
  </p>
 </form>
 
</body>
</html>