JS实现级联菜单

是首先应该添加两个下拉列表并设置id属性来方便操作：

 <select id="country">

     <option>国家</option>

 </select>

 <select id="city">

     <option>城市</option>

 </select>

js代码中首先需要声明国家和城市两个数组：

var country = ['中国', '美国','英国']

var city = [

    ['北京', '上海'],

    ['纽约'],

    ['伦敦']

]

然后通过id获取页面中的下拉菜单元素：

var cou = document.getElementById("country");

var cit = document.getElementById("city");

然后初始化第一个列表：

//初始化国家下拉列表

for(var i = 0; i < country.length; i++) {

    //新的option

    var option = new Option()

    //赋值

        option.appendChild(document.createTextNode(country[i]))

    //插入

    cou.appendChild(option)

}

在第一个下拉列表中选择国家后，第二个列表显示相应的城市：

//为国家下拉列表添加事件

cou.addEventListener('change', function(){

    //另城市列表变为初始状态，可以注释掉查看效果

    cit.options.length = 1;

    //如果国家选择不为默认值

    if(cou.selectedIndex != 0) {

        //遍历相应国家的城市

        for(var j = 0; j < city[cou.selectedIndex - 1].length; j++) {

            var option2 = new Option(city[cou.selectedIndex-1][j],city[cou.selectedIndex-1][j])

            cit.options.add(option2)

        }

    }

});

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <select id="country">

            <option>国家</option>

        </select>

        <select id="city">

            <option>城市</option>

        </select>

        <script>

            var country = ['中国', '美国','英国']

            var city = [

                ['北京', '上海'],

                ['纽约'],

                ['伦敦']

            ]

            var cou = document.getElementById("country");

            var cit = document.getElementById("city");

            //初始化国家下拉列表

            for(var i = 0; i < country.length; i++) {

                //新的option

                var option = new Option()

                //赋值

                option.appendChild(document.createTextNode(country[i]))

                //插入

                cou.appendChild(option)

            }

            //为国家下拉列表添加事件

            cou.addEventListener('change', function(){

                //另城市列表变为初始状态，可以注释掉查看效果

                cit.options.length = 1;

                //如果国家选择不为默认值

                if(cou.selectedIndex != 0) {

                    //遍历相应国家的城市

                    for(var j = 0; j < city[cou.selectedIndex - 1].length; j++) {

                        var option2 = new Option(city[cou.selectedIndex-1][j],city[cou.selectedIndex-1][j])

                        cit.options.add(option2)

                    }

                }

            });

        </script>

    </body>

</html>

完整代码

巴特西

JS实现级联菜单

最新文章

热门文章