首次的onload, 市/區無法跟著省份, 怎麼改變呢

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function address() {
            /*请在此补充代码*/
            var a = document.getElementById("a");
            var b = document.getElementById("b");
            var aArr = ["北京市", "天津市", "河北市", "河南市"];
            var bArr = ["朝陽區", "西城區", "石家庄", "邯鄲市", "西青區", "武清區", "鄭州市", "開封市"];

            selectAdd(a, aArr, aArr.length);
            selectAdd(b, bArr, bArr.length);

            a.selectedIndex = 0;
        }

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

        function linkage() {
            /*请在此补充代码*/
            var a = document.getElementById("a");
            var b = document.getElementById("b");
            var arr;
            var aVal = parseInt(a.value);
            if (aVal === 0) {
                arr = [b[0].text, b[1].text];
            } else if (aVal == 1) {
                arr = [b[2].text, b[3].text];
            } else if (aVal == 2) {
                arr = [b[4].text, b[5].text];
            } else if (aVal == 3) {
                arr = [b[6].text, b[7].text];
            }
            b.options.length = 0;
            selectAdd(b, arr, arr.length);
        }
    </script>
</head>

<body onload="address()">
    <form>
        省份：
        <!--  请在此补充代码 -->
        <select id="a" onchange="linkage()"></select>
        市/区：
        <!--  请在此补充代码 -->
        <select id="b"></select>
    </form>
</body>

</html>

只有第一次onload, 市/區無法跟著省份呈現, 不曉得能如何做變更呢?

另外代碼的部分有需要再優化嗎?

慕桂英0504842 2020-06-30

源自：JavaScript入门 7-8 编程练习

收起

2回答

好帮手慕小班回答被采纳获得+3积分 2020-06-30 18:28:59

同学你好，测试同学最新贴出的代码，运行效果是正确的，但是有一点小建议，根据省市分级，西青区、武清区属于添加市，建议根据对应层级添加市区，修改后如下：

如果我的回答解决了你的疑惑，请采纳，祝学习愉快~

收起回答

慕桂英0504842 提问者 2020-06-30 17:44:01

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function address() {
            /*请在此补充代码*/
            var a = document.getElementById("a");
            var b = document.getElementById("b");
            var aArr = ["北京市", "天津市", "河北市", "河南市"];
            var bArr = ["朝陽區", "西城區", "石家庄", "邯鄲市", "西青區", "武清區", "鄭州市", "開封市"];

            selectAdd(a, aArr, aArr.length);
            selectAdd(b, bArr, bArr.length);

            a.selectedIndex = 0;

            linkage();
        }

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

        function linkage() {
            /*请在此补充代码*/
            var a = document.getElementById("a");
            var b = document.getElementById("b");
            var arr;
            var aVal = parseInt(a.value);
            if (aVal === 0) {
                arr = ["朝陽區", "西城區"];
            } else if (aVal == 1) {
                arr = ["石家庄", "邯鄲市"];
            } else if (aVal == 2) {
                arr = ["西青區", "武清區"];
            } else if (aVal == 3) {
                arr = ["鄭州市", "開封市"];
            }
            b.options.length = 0;
            selectAdd(b, arr, arr.length);
        }
    </script>
</head>

<body onload="address()">
    <form>
        省份：
        <!--  请在此补充代码 -->
        <select id="a" onchange="linkage()"></select>
        市/区：
        <!--  请在此补充代码 -->
        <select id="b"></select>
    </form>
</body>

</html>

已修正過代碼, 這樣寫是否就能符合第一次onload也能連動的效果呢

收起回答