<div class="haoBox"> <div class="haoTxt"> 选择地址: </div> <div class="sheng"> <ul> <li> <div class="shengtxt">省:</div> <select class="shiput" name="province_id" id="province_id"> <option value ="">请选择</option> {volist name="province_list" id="vo"} <option value ="{$vo.id}">{$vo.name}</option> {/volist} </select> </li> <li> <div class="shengtxt">市:</div> <select class="shiput" id="city_id"> <option value ="">请选择</option> </select> </li> <li> <div class="shengtxt">区:</div> <select class="shiput" id="county_id"> <option value ="">请选择</option> </select> </li> </ul> </div> </div>
<script src="你的文件路径/jquery.min.js"></script>
<script type="text/javascript"> //修改一级地址 $("#province_id").change(function(){ //请求后台接口获取所选择省下面的市 province_id = $('#province_id option:selected').val(); if (province_id==''){ //省份选择为’请选择时‘ 把二三级都设置成请选择 clearOption('county_id'); appendOption('county_id', '', "请选择"); clearOption('city_id'); appendOption('city_id', '', "请选择"); }else{ //把第三级改成’请选择‘ clearOption('county_id'); appendOption('county_id', '', "请选择"); //根据一级的 id 刷新二级列表 getChild(province_id,'city_id'); } }); //修改二级地址 $("#city_id").change(function(){ //请求后台接口获取所选择省下面的市 city_id = $('#city_id option:selected').val(); if(city_id==''){ //二级选择成 ’请选择‘ 把三级设置成请选择 clearOption('county_id'); appendOption('county_id', '', "请选择"); }else{ //根据二级id刷新三级 getChild(city_id,'county_id'); } }); //请求接口获取下级列表,并渲染到id等于 name 的select选择框 function getChild(id,name){ if (id != '') { $.ajax({ type:'post', url:"your_url", data:{"id":id}, dataType:"json", success:function(data){ if(data.code == 1){ list = data.data; clearOption(name); appendOption(name, '', "请选择"); for (i = list.length - 1; i >= 0; i--){ appendOption(name, list[i].id, list[i].name); } }} }); }else{ clearOption(name); appendOption(select_id, '', "请选择"); } } // 添加select的option选项的函数 function appendOption(select_id, value, name) { $('#'+select_id).append( "<option value=" + value + ">" + name + "</option>" ); } // 清空option function clearOption(select_id) { obj = document.getElementById(select_id); for (i = obj.options.length - 1; i >= 0; i--){ obj.options[i] = null; } } </script>