简单的三级联动案例，供参考-CSDN博客

写个简单的三级联动案例，以地区来演示，供参考，大家注意下自己的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>