js三级联动

最新推荐文章于 2024-09-22 11:17:00 发布

javalj_hz

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量167

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/l4oli/article/details/53939264

版权

三级联动

<div class="form-group cityDiv">
                                    <ins>所在城市</ins>
                                    <select id="province_id" name="province_id" >
                                    </select> 
                                    <select id="city_id" name="city_id">
                                    </select> 
                                    <select id="area_id" name="area" >
                                    </select>   
</div>

var oProvince = $("#province_id");
            var oCity = $("#city_id");
            var oDistrict = $("#area_id");
            function province(){
                $.ajax({
                    type:"POST",
                    url:contextPath+"back/city/listProvince.htm",
                    data:"{}",
                    dataType:"json",
                    success:function(data){
                        var temp_html='';
                         $.each(data.msg,function(i,province){
                             temp_html+="<option value='"+province.province_id+"'>"+province.province_name+"</option>";
                        });
                         oProvince.html(temp_html);
                          city($("#province_id").val());
                    }            
                });
            }

            function city(province_id){
                $.ajax({
                    type:"POST",
                    url:contextPath+'back/city/listCity.htm?tm='+new Date().getTime(),
                    data:{'province_id':province_id},
                    dataType:'json',
                    cache:false,
                    success:function(data){
                    var temp_html='';
                         $.each(data.msg,function(i,city){
                             temp_html+="<option value='"+city.city_id+"'>"+city.city_name+"</option>";
                        });
                         oCity.html(temp_html);
                          area($("#city_id").val());
                    }            
                });
            }

             function area(city_id){
                $.ajax({
                    type:"POST",
                    url:contextPath+'back/area/listArea.htm?tm='+new Date().getTime(),
                    data:{'city_id':city_id},
                    dataType:'json',
                    cache:false,
                    success:function(data){
                        var temp_html='';
                         $.each(data.msg,function(i,area){
                             temp_html+="<option value='"+area.area_id+"'>"+area.area_name+"</option>";
                        });
                         oDistrict.html(temp_html);
                    }            
                });
            }


             oProvince.change(function(){
               city($("#province_id").val());
            });
              oCity.change(function(){
               area($("#city_id").val());
            });