基于javascript实现全国省市二级联动下拉选择菜单

前端技术 2023/09/10 JavaScript

本文实例讲述了js实现全国省市二级联动下拉选择菜单，分享给大家供大家参考。具体如下：

效果图：

 

具体代码：

<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\" />
<title>无标题文档</title>
<script type=\"text/javascript\">
//好像不是这样子
var arr_province = [\"请选择省/城市\",\"北京市\",\"上海市\",\"天津市\",\"重庆市\",\"深圳市\",\"广东省\",\"河南省\"];
var arr_city = [
        [\"请选择城市/地区\"],
        [\"东城区\",\"西城区\",\"朝阳区\",\"宣武区\",\"昌平区\",\"大兴区\",\"丰台区\",\"海淀区\"],
        [\'宝山区\',\'长宁区\',\'丰贤区\', \'虹口区\',\'黄浦区\',\'青浦区\',\'南汇区\',\'徐汇区\',\'卢湾区\'],
        [\'和平区\', \'河西区\', \'南开区\', \'河北区\', \'河东区\', \'红桥区\', \'塘古区\', \'开发区\'],
        [\'俞中区\', \'南岸区\', \'江北区\', \'沙坪坝区\', \'九龙坡区\', \'渝北区\', \'大渡口区\', \'北碚区\'],
        [\'福田区\', \'罗湖区\', \'盐田区\', \'宝安区\', \'龙岗区\', \'南山区\', \'深圳周边\'],
        [\'广州市\',\'惠州市\',\'汕头市\',\'珠海市\',\'佛山市\',\'中山市\',\'东莞市\'],
        [\'郑州市\']
      ];
//函数：当省份中的option改变时，城市中的数据应该相应的改变
function select_change(index)
{
  var city = document.form1.city;
  //根据当前index确定city中要写入的二维数组是哪一个
  city.length = 0;
  city.length = arr_city[index].length;
  for(var i=0;i<arr_city[index].length;i++)
  {
    //创建每一个option对象(option标记)
    city.options[i].text = arr_city[index][i];
    city.options[i].value = arr_city[index][i];
  }
}
//函数：给province对象添加option对象，每个option的内容来自于arr_province
function init()
{
  //获取province和city对象
  var province = document.form1.province;
  var city = document.form1.city;
  //指定下拉列表的高度，准备写入几个option的标记(很重要)
  province.length = arr_province.length;           //这句必须有
  //循环数组，将数组内容写入到province中去
  for(var i=0;i<arr_province.length;i++)
  {
    //创建每一个option对象(option标记)
    province.options[i].text = arr_province[i];
    province.options[i].value = arr_province[i];
  }
  //指定省份当前的默认选中索引号
  var index = 0;
  province.selectedIndex = index;
  //对象city的内容来自于province的选择
  //我们默认指定一个option，一般是下标为0的那个
  city.length = arr_city[index].length;
  for(var j=0;j<arr_city[index].length;j++)
  {
    //创建每一个option对象(option标记)
    city.options[j].text = arr_city[index][j];
    city.options[j].value = arr_city[index][j];
  }
}

</script>
</head>

<body onload=\"init()\">
<form name=\"form1\">
省份：<select name=\"province\" onchange=\"select_change(this.selectedIndex)\" style=\"width:130px;\"></select>
城市：<select name=\"city\"></select>
</form>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/26293

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案