为什么第一次运行选择北京市的时候，市区不加载数据的bug，选择天津省，市区加载数据，再返回选择北京省也能加载数据。

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script>
            /*<script type="text/javascript" src="onchange.js">*/
            function func_select(y)
{
    var beijing=["朝阳区","新城区"];
    var tianjing=["西青区","武清区"];
    var hebei=["石家庄","邯郸市"];
    var henan=["郑州市","开封市"];
    x = document.getElementById(y);
    document.getElementById(y+"1").innerHTML="";
    if(x.value=="北京市")
    {
        for(i=0;i<beijing.length;i++)
        {
            var newOption = document.createElement("option");
            newOption.text=beijing[i];
            document.getElementById(y+"1").add(newOption);
        }
    }
    if(x.value=="天津市")
    {

        for(i=0;i<tianjing.length;i++)
        {
            var newOption = document.createElement("option");
            newOption.text=tianjing[i];
            document.getElementById(y+"1").add(newOption);
        }
    }
    if(x.value=="河北市")
    {

        for(i=0;i<hebei.length;i++)
        {
            var newOption = document.createElement("option");
            newOption.text=hebei[i];
            document.getElementById(y+"1").add(newOption);
        }
    }
    if(x.value=="河南市")
    {

        for(i=0;i<henan.length;i++)
        {
            var newOption = document.createElement("option");
            newOption.text=henan[i];
            document.getElementById(y+"1").add(newOption);
        }
    }
}
        </script>

    </head>
    <body>
        <form style="width: 250px;height: 120px;border: 1px solid gray;">
            <label>省份：</label>
            <select id="select1" onchange="func_select('select1')">
            <option>北京市</option>
            <option>天津市</option>
            <option>河北市</option>
            <option>河南市</option>
        </select>
        <label>市区：</label>
        <select id="select11"></select>
    </form>
    <form style="width: 250px;height: 120px;border: 1px solid gray;">
        <label>省份：</label>
        <select id="select2" onchange="func_select('select2')">
        <option>北京市</option>
        <option>天津市</option>
        <option>河北市</option>
        <option>河南市</option>
    </select>
    <label>市区：</label>
    <select id="select21"></select>
</form>
<form style="width: 250px;height: 120px;border: 1px solid gray;">
    <label>省份：</label>
    <select id="select3" onchange="func_select('select3')">
    <option>北京市</option>
    <option>天津市</option>
    <option>河北市</option>
    <option>河南市</option>
</select>
<label>市区：</label>
<select id="select31"></select>
</form>
<form style="width: 250px;height: 120px;border: 1px solid gray;">
    <label>省份：</label>
    <select id="select4" onchange="func_select('select4')">
    <option>北京市</option>
    <option>天津市</option>
    <option>河北市</option>
    <option>河南市</option>
</select>
<label>市区：</label>
<select id="select41"></select>
</form>
    </body>
</html>
在这里输入代码，可通过选择【代码语言】突出显示

慕后端4423507 2020-12-15

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

收起

1回答

好帮手慕美 2020-12-16 09:58:52

同学你好，在一级菜单为北京市时显示不出来内容，是因为省份下拉框在onchange事件选项改变时才会触发该事件调用func_select()方法。同学可以将添加省份和市/区功能分开来写

参考代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
    function address() {
        /*请在此补充代码*/
        var prov = document.getElementById("prov");
        var sec = document.getElementById("sec");
        var province = ["北京市", "天津市", "河北省", "河南省"];
        selectAdd(prov, province, 0, 3);
        linkage();
    }

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

    function linkage() { /*请在此补充代码*/
        var section = ["朝阳区", "西城区", "西青区", "武清区", "石家庄", "邯郸市", "郑州市", "开封市"];
        var prov = document.getElementById("prov");
        var sec = document.getElementById("sec");
        var n = prov.value;
        if (n == "北京市") {
            sec.options.length = 0;
            selectAdd(sec, section, 0, 1);
        } else if (n == "天津市") {
            sec.options.length = 0;
            selectAdd(sec, section, 2, 3);
        } else if (n == "河北省") {
            sec.options.length = 0;
            selectAdd(sec, section, 4, 5);
        } else if (n == "河南省") {
            sec.options.length = 0;
            selectAdd(sec, section, 6, 7);
        }
    }
    </script>
</head>

<body onload="address()">
    <form>
        省份：
        <select name="prov" id="prov" onchange="linkage()"></select>
        市/区：
        <select name="sec" id="sec"></select>
    </form>
</body>

</html>