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

最新推荐文章于 2024-05-22 09:19:22 发布

中华毅少

最新推荐文章于 2024-05-22 09:19:22 发布

阅读量1.9k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43736187/article/details/105205448

版权

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

中华毅少

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript的数组和数组元素的遍历，实现全国省份和城市一览表

利用javascript的数组和数组元素的遍历，实现如下图所示的全国省份和城市一览表。本次为初学JavaScript数组，主要利用数组的遍历、一维数组、二维数组的定义的简单应用省用一维数组定义输出市用二维数组定义输出方法一<!DOCTYPE html><html><head> <meta http-equiv="Content-Ty...
复制链接

扫一扫