在老师的3级菜单基础上增加 选择城市后 使用jquery get方法从服务器获取城市的介绍并 显示在

原创2019-01-26 22:35:0688
摘要:在老师的3级菜单基础上增加 选择城市后 使用jquery get方法从服务器获取城市的介绍并 显示在下方<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <

在老师的3级菜单基础上增加 选择城市后 使用jquery get方法从服务器获取城市的介绍并 显示在下方

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>三级联动菜单</title>
</head>
<body>
省 <select name="" id="pro"></select>
市 <select name="" id="city"></select>
区 <select name="" id="area"></select>
 <p id="scenic"></p> 
<script src="jquery.min.js"></script>
<script>
    $(function(){
        $.getJSON('inc/prov.json',function(data){
            var option = '<option value="">选择(省)</option>';
            $.each(data,function(i){
                option += '<option value="'+data[i].proId+'">'+data[i].proName+'</option>';
            });
            $('#pro').html(option);

        });

        $('#pro').change(function(){
            //查看当前选择中元素内容
            //console.log($(this).find(':selected').text());

            $.getJSON('inc/2.json',function(data){
               let option = '<option value="">选择(市)</option>';
                $.each(data,function(i){
                    if (data[i].proId == $('#pro').val()) {
                        option += '<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>';
                    }
                });
                $('#city').html(option);
            });
        });

        $('#city').change(function(){
            //查看当前选择中元素内容
            //console.log($(this).find(':selected').text());
            $.getJSON('inc/3.json',function(data){
                let option = '<option value="">选择(县区)</option>';
                $.each(data,function(i){
                    if (data[i].cityId == $('#city').val()) {
                        option += '<option value="'+data[i].areaId+'">'+data[i].areaName+'</option>';
                    }
                });
                $('#area').html(option);
            });
        });

        $('#area').change(function(){
            
            var v = "inc/"+$("#pro  option:selected").val()+"_"+$("#city option:selected").val()+"_"+$("#area option:selected").val()+"_scenic.txt";
            //介绍文件名称
            $.get(
            v,   // 请求的url地址

            "",   // 请求参数,以对象字面量形式

            function (data,status){     // 请求成功的回调方法
                 console.log(status);    // success
                if (status === 'success') {
                    console.log(data);
                    $('#area').next().text(data);
                   
                } else {    //出错,未拿到响应数据
                    // $('#detail').html('<span style="color:red">请求错误</span>');
                }
            },
            'html'  // 响应数据的格式,html/json/xml可省,会自动判断
        );
        });

        //思考: 如何将获取到的内容,及时的回显到页面中,动态的提示用户当前的选择内容,实现数据绑定
    })
</script>
</body>
</html>

批改老师:天蓬老师批改时间:2019-01-27 09:08:54
老师总结:三级联动, 用处非常之多, 其实可以有许多第三方插件可以用的, 但是了解其原生是怎么写的. 还是很有必要的

发布手记

热门词条