JS实现级联菜单

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

1 <select id="country">
2     <option>国家</option>
3 </select>
4 <select id="city">
5     <option>城市</option>
6 </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>
完整代码

 

posted @ 2019-08-31 21:24  肥鹅PU火  阅读(4943)  评论(0)  编辑  收藏  举报