Ajax三级联动对比jQuery三级联动

最新推荐文章于 2024-05-21 11:30:58 发布

smile_team

最新推荐文章于 2024-05-21 11:30:58 发布

阅读量95

点赞数

分类专栏： Ajax 文章标签： ajax

本文链接：https://blog.csdn.net/smile_team/article/details/108449587

版权

Ajax 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Ajax三级联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三级联动</title>
</head>
<body>
    <!--三级联动 - 两个二级联动-->
    <select id="province">
    </select>
    <select id="city">
        <option value=""></option>
    </select>
    <select id="qu">
        <option value=""></option>
    </select>
    <script src="./js/createXMLHttpRequest.js"></script>
    <script>
        //获取省份、城市下拉列表
        var provinceElement = document.getElementById('province')
        var cityELement = document.getElementById('city')
        var datas;
        //1.当页面加载完毕后，动态获取省份信息
        var xhr = createXMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                //得到服务器端返回的数据
                var response = xhr.responseText;
                //将JSON字符串转换成JSON对象
                datas = JSON.parse(response)
                //得到数组类型的对象 - 遍历
                for(var i = 0;i<datas.length;i++){  
                    var data = datas[i]
                    var province = data.province;
                    //将数据更新到HTML页面中
                    var opt = document.createElement('option')
                    opt.setAttribute('value',province)
                    opt.textContent = province;
                    provinceElement.appendChild(opt)
                }
            }
        }
        xhr.open('get','data/server1.json');
        xhr.send(null);

        //给省份下拉列表绑定change事件
        provinceElement.addEventListener('change',function(){
            //给城市下拉列表的选项清空
            var cityOpts = cityELement.options
            for(var k = 1;k<cityOpts.length;k++){
                cityELement.removeChild(cityOpts[k])
                k--;
            }
            
            //1.用户选择的省份信息
            var opts = provinceElement.options;//获取指定下拉列表所有选项
            var index = provinceElement.selectedIndex;//被选中<option>的索引值
            var opt = opts.item(index)
            var provinceName = opt.getAttribute('value')
            //2.根据省份信息获取对应的城市信息
            for(var i = 0;i<datas.length;i++){  
                    var data = datas[i]
                    var province = data.province;
                   if(provinceName === province){
                       //获取对应的城市信息
                       var cities = data.cities;
                       for(var j=0;j,cities.length;j++){
                           var city = cities[j].city
                           //将城市信息更新到HTML页面
                           var opt = document.createElement('option')
                           opt.setAttribute('value',city)
                           opt.textContent = city
                           cityELement.appendChild(opt)

                       }
                   }
                }
        })


        function createXMLHttpRequest(){    
            var httpRequest;
            if(window.XMLHttpRequest){
                httpRequest = new XMLHttpRequest();
            }else if(window.ActiveXObject){//适用于IE浏览器
                try{
                    httpRequest = new ActiveXObject("Msxml2.XMLHTTP");//IE 7+
                }catch(e){
                    try{
                        httpRequest = new ActiveXObject ("Microsoft.XMLHTTP");//IE 6-
                    }catch(e){}
                }
            }
            return httpRequest;
        }
    </script>
</body>
</html>

jQuery三级联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三级联动</title>
</head>
<body>
    <select id="province">
    </select>
    <select id="city">
        <option value=""></option>
    </select>
    <select id="qu">
        <option value=""></option>
    </select>
    <script src="./js/createXMLHttpRequest.js"></script>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        var $city = $('#city')
        var $province = $('#province')
        var json;
        $.getJSON('data/server1.json',function(data){
            json = data
            $.each(data,function(index,obj){
                var provinceName = obj.provinc;
                $province.append($('<option value="'+ provinceName +'">'+ provinceName+'</option>'))
            })
        })
        $province.bind('change',function(){
            //$city.empty()

            
            //$city.append($('<option value="">----</option>'))
            var provinceElementName = $(this).children('option:selected').text()
            $.each(json,function(index,obj){
                var provinceName = obj.provinc;
                if(provinceElementName === provinceName){
                    var citits = obj.citits;
                    $each(cities,function(index,obj){
                        var cityName = obj.city;
                        $city.append($('<option value="'+ cityName +'">' + cityName+'</option>'))
                    })
                }
            })
        })
    </script>
</body>
</html>

smile_team

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax三级联动对比jQuery三级联动

Ajax三级联动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>三级联动</title></head><body> <!--三
复制链接

扫一扫