简单的三级联动案例,供参考

写个简单的三级联动案例,以地区来演示,供参考,大家注意下自己的jquery导入路径,如有不对的地方欢迎大家纠正。

<html>
    <head>

    <!--导入jquery-->
    <script type="text/javascript"src="jquery1.7.1.js">
    </script>

    </head>

    <script type="text/javascript">

        $(function(){//页面加载

            //页面加载时调用方法,加载所有国家
            //查询所有国家,并加载到国家下拉框中
            loaddata('gj','查询国家请求的url','查所有id可以给空''省份''国家');

            //国家下拉框的值改变事件
            $("#gj").change(function(){

                //查询当前国家下的所有省份,并加载到省份下拉框中
                loaddata('sf','查询省份请求的url','国家id','省份');

            }

            //省份下拉框的值改变事件
            $("#sf").change(function(){

                //查询当前省份下的所有市,并加载到市下拉框中
                loaddata('sj','省份的请求url','省份id''市级');

            }
    });


    //数据请求加载方法
    //eleid 元素id,url 请求地址,id 父级,type 类型
    function loaddata(eleid,url,id,type){
        $.ajax({ 
          type:'get', //请求类型,这里是get请求
          url:url, //请求地址
          data:{id:id}//请求参数
          success:function(data){ //请求成功的回调方法

            if(type=='国家'){//如果是国家

                $("#"+eleid).html("");//先清空国家
                $("#sf").html("");//再清空省份
                $("#sj").html("");//最后清空市else if(type=='省份'){//如果是省

                $("#"+eleid).html("");//先清空省份
                $("#sj").html("");//再后清空市

            }else if(type=='市级'){//如果是市级

                $("#"+eleid).html("");//清空市
            }

            $("#"+eleid).append('<option>请选择</option>');

            //需要注意的是如果后台传来的data数据不一致,
            //需先转换成对象再遍历
            for(var i=0;i<data.length;i++){

                var va=data.选择的值;//获取值
                var vashow=data.显示的值;//获取值

                var str='<option value="'+va+'">'
                         +vashow+'</option>';

            //将数据追加到对应的下拉框中
            $("#"+eleid).append(str);

            }
          },error:function(){//请求失败回调方法 
            //请求出错处理 

        }); 
    }

</script>



<body>

    <!--国家下拉框-->
    <select id="gj">
        <option>请选择</option>
    </select>

    <!--省份下拉框-->
    <select id="sf">
        <option>请选择</option>
    </select>

    <!--市级下拉框-->
    <select id="sj">
        <option>请选择</option>
    </select>

</body>
</html>
上一篇:从时间碎片角度理解阻塞IO模型及非阻塞模型


下一篇:《TensorFlow技术解析与实战》——第3章 可视化TensorFlow