search

Home >Web Front-end >JS Tutorial >Implementing nationwide provincial and municipal second-level linkage drop-down selection menus based on javascript_javascript skills

Implementing nationwide provincial and municipal second-level linkage drop-down selection menus based on javascript_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:17:281343browse

This article describes the example of js realizing the second-level linkage drop-down selection menu of provinces and cities across the country, and shares it with everyone for your reference. The details are as follows:

Rendering:

Specific code: 

<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>

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Usage and example analysis of window.onerror()_javascript skillsNext article：Usage and example analysis of window.onerror()_javascript skills

Related articles

See more