为什么列表框没有显示呢？

首页课程实战体系课手记专栏慕课教程

为什么列表框没有显示呢？

来源：7-8 编程练习

tttjh_

2021-02-20 20:10:57

问题描述：

为什么我js的代码中将元素定义为全局变量会出错呢，而设置为局部变量就没问题了？

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="index.js"></script>
</head>
<body onload="address()">
    <form>
         省份：<select name="shi" id="shi" onchange="linkage()"></select>
        <!--  请在此补充代码 -->
         市/区：<select name="qu" id="qu"></select>
         <!--  请在此补充代码 -->
    </form>
</body>
</html>

相关代码：

var shi = document.getElementById("shi");
var qu = document.getElementById("qu");
var quArray = new Array();
function address() {
    /*请在此补充代码*/
    var shiArray = ["北京市", "天津市", "河北省", "河南省"];
    selectAdd(shi, shiArray, shiArray);
}

function selectAdd(obj, name, value) {
    // 请在此补充代码
    for (var i = 0; i < name.length; i++) {
        obj.options.add(new Option(name[i], value[i]));
    }
}

function linkage() {
    /*请在此补充代码*/
    if (shi.value == "北京市") {
        quArray[0] = "朝阳区";
        quArray[1] = "西城区";
    } else if (shi.value == "天津市") {
        quArray[0] = "西青区";
        quArray[1] = "武清区";
    } else if (shi.value == "河北省") {
        quArray[0] = "石家庄";

    } else if (shi.value == "河南省") {
        quArray[0] = "郑州市";
        quArray[1] = "开封市";
    }
    qu.options.length = 0;
    selectAdd(qu, quArray, quArray);
}