javascript的数组和数组元素的遍历，实现全国省份和城市一览表

利用javascript的数组和数组元素的遍历，实现如下图所示的全国省份和城市一览表。

本次为初学JavaScript数组，主要利用数组的遍历、一维数组、二维数组的定义的简单应用

省用一维数组定义输出
市用二维数组定义输出

方法一

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Exp2</title>
</head>
<body><center><script type="text/javascript">var provinceArr=['山西省','陕西省'];var cityArr=[['太原市','晋中市'],['西安市','榆林市']];var html='<h1 align="center">全国省份和城市一览表</h1>';for(var i=0;i<provinceArr.length;i++){html+=provinceArr[i]+'&nbsp';}html+='<br>';for(var i=0;i<provinceArr.length;i++){html+='<select>';for(var j=0;j<cityArr[i].length;j++){html+='<option>'+cityArr[i][j]+'</option>';}html+='</select>';}document.write(html);</script></center>
</body>
</html>

这种方法是定义了一个html的变量，对html变量进行一系列的赋值输出，最后利用document.write()方法进行输出HTML这一字符串的值

方法二

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Exp2</title></head><body><h3 style="text-align: center;">全国省份城市一览表</h3><form name="form1"><table width="235" height="69" border="0" align="center"><tr><th id="province"></th><td height="21"><br><select id="province_1"></select><select id="province_2"></select></td></tr></table></form>
</body>
<script>arr1 = [["太原", "大同", "朔州", "阳泉", "长治", "忻州", "吕梁", "晋中", "临汾", "运城", "晋城"],["西安", "榆林", "延安", "宝鸡", "咸阳", "渭南", "铜川", "汉中", "安康", "商洛"]]arr = ["山西省", "陕西省"]var initData = function () {var province = document.getElementById("province");for (let index = 1; index <= arr.length; index++) {province.innerHTML += arr[index-1] + " ";}var obj = document.getElementById("province_1");for (let index = 1; index <= arr1[0].length; index++) {obj.add(new Option(arr1[0][index], index));}var obj2 = document.getElementById("province_2");for (let index = 1; index <= arr1[1].length; index++) {obj2.add(new Option(arr1[1][index], index));}}initData()
</script></html>

方法三

不采用二维数组定义的犯法，可以把市直接定义两个一维数组进行操作
进行最普通的html操作

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>将数组中的数据添加到下拉菜单中</title>
<script type="text/javascript">var a = new Array("太原市","晋中市","XX市","XX市");
var b = new Array("西安市","榆林市","XX市","XX市");
function sx1(){for (var i=0;i < a.length; i++)    {document.form1.a1.options[i] = new Option(a[i]);}
}
function sx2(){for (var i=0;i < a.length; i++)    {document.form1.a2.options[i] = new Option(b[i]);}
}
</script>
</head>
<body><h3>全国省份和城市一览表</h3>
山西省&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;陕西省
<form name="form1">
<select name="" id="a1" onFocus="sx1()"></select>
<select name="" id="a2" onFocus="sx2()"></select>
</form>
</body>
</html>

javascript的数组和数组元素的遍历，实现全国省份和城市一览表相关推荐

全国省份和城市数组2
代码 '辽宁' => Array( '沈阳(*)', '沈阳', '鞍山', '鞍山', '本溪' ...
javascript——数组、数组遍历、forEach、增加删除元素
数组(Array) 数组也是一个对象,它和普通对象的功能类似,也是用来存储数据的:不同的是普通对象是使用字符串作为属性名的,而数组是使用数字来作为索引操作元素的对象中是用属性,数组中用索引索引:数 ...
javascript数组——新建数组、访问数组、遍历数组的方法、数组对象的方法、冒泡排序算法、json的正反序列化
目录数组通过构造函数的三种方法字面量创建数组方式访问数组遍历数组的方法遍历:遍历就是把数组中的元素从头到尾都访问一次操作数组对象的方法删除和添加 delete与Vue.delete区别 ...
数组元素的遍历及数组常用方法-B站晓舟学习报告笔记
文章目录数组元素的遍历 1 while循环遍历 2 for循环遍历 3 for in 遍历(i为索引) 4 for of 遍历(i为值) 5 map方法遍历数组的常用方法 push sort fi ...
JS JavaScript中去除数组中重复元素的方法
JS JavaScript中去除数组中重复元素的方法感觉比较好理解的3种方法,总结一下,大家共同学习方法一: Array.prototype.method1 = function(){ var a ...
JavaScript 中的常用12种循环遍历（数组或对象）的方法
1.for 循环 1 2 3 4 5 6 7 let arr = [1,2,3]; for (let i=0; i<arr.length; i++){ console.log(i,arr[i] ...
详解JavaScript数组过滤相同元素的5种方法
详解JavaScript数组过滤相同元素的5种方法:https://www.jb51.net/article/114490.htm 转载于:https://www.cnblogs.com/bydzha ...
如何从JavaScript中删除数组中的元素？
本文翻译自:How to remove element from an array in JavaScript? var arr = [1,2,3,5,6]; I want to remove the ...
JavaScript 遍历数组翻转数组与冒泡排序法
使用遍历数组的方式翻转数组中的元素 ['a','b','c','d'] ['d','c','b','a'] 代码实例: //使用遍历数组的方式,翻转数组中的元素 var arr = [' ...
【Linux】Shell脚本中如何使用“循环”遍历“数组”中的元素（包括MySQL的常用指令介绍）
一.背景实习过程中,今天mentor突然让我拉取一下远端园区数据库中的部分信息,因为包含很多不同园区的数据信息,而且要以园区为单位生成文件来对数据进行存放,因此自然是需要使用shell脚本来自动生成 ...

javascript的数组和数组元素的遍历，实现全国省份和城市一览表

利用javascript的数组和数组元素的遍历，实现如下图所示的全国省份和城市一览表。

方法一

方法二

方法三

javascript的数组和数组元素的遍历，实现全国省份和城市一览表相关推荐

最新文章

热门文章