js三级联动

来源：互联网发布：app客户端制作软件编辑：程序博客网时间：2024/05/01 20:57

三级联动

<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());            });

0 0