今天有人问我用js怎么实现地区三级联动???? what???这是基本功好伐，话不多说 看代码
1 // 初始化地址列表 2 addressInit(); 3 4 function addressInit() { 5 $.get('order.php?act=address', function (resp) { 6 // 测试是否存在收货地址 7 if (0 == resp.data.length) { 8 return false; 9 } 10 //展示地址 11 $('#al_01').empty(); 12 13 $.each(resp.data, function (i, address) { 14 var option = '<li>'; 15 option += '<span>'+address.consignee+'</span>'; 16 option += '<span id='+address.address_id+'>'+address.r1_title+' '+address.r2_title+' '+address.r3_title+' '+address.address+' '+address.mobile; 17 option += '</span>'; 18 option += '<a href="javascript:del_add('+address.address_id+')">删除</a>'; 19 option += '<a href="javascript:edit_add('+address.address_id+')" class="click_pop">修改</a>'; 20 option += '</li>'; 21 $('#al_01').append(option); 22 }); 23 }, 'json'); 24 } 25 26 27 function setRegion(id, level) { 28 // 下个级别 29 var next = +level + 1; 30 31 // 设置最大地区 32 var maxLevel = 3; 33 34 // ajax获取子地区 35 $.get('order.php?act=child', {region_id: id}, function (resp) { 36 $('#input-address-region_id_' + next + '>option:gt(0)').remove(); 37 $.each(resp.region, function (i, region) { // option += address.is_last == '1' ? ' selected' : ''; 38 var option = '<option value="' + region.region_id + '">'; 39 option += region.region_name; 40 option += '</option>'; 41 // 加入select(next) 42 $('#input-address-region_id_' + next).append(option); 43 }); 44 }, 'json'); 45 46 //清空 后续的select 47 for (var i = next + 1; i <= maxLevel; ++i) { 48 $('#input-address-region_id_' + i + '>option:gt(0)').remove(); 49 } 50 51 } 52 53 54 55 $(function () { 56 // 初始化1级地区 57 setRegion(1, 0); 58 // 绑定select的change事件 59 $('select[id^=input-address-region_id_]').change(function () { 60 // 请选择, 不触发 61 if ('' == $(this).val()) { 62 return; 63 } 64 setRegion($(this).val(), $(this).data('level')); 65 }); 66 })
1 <li> 2 <label class="left"><b>*</b> 所在地区：</label> 3 <div class="formlisttext" id="add"> 4 <select class="small-input" name="region_id_1" id="input-address-region_id_1" data-level="1"> 5 <option value=""> 请选择 </option> 6 </select> 7 <select class="small-input" name="region_id_2" id="input-address-region_id_2" data-level="2"> 8 <option value=""> 请选择 </option> 9 </select> 10 <select class="small-input" name="region_id_3" id="input-address-region_id_3" data-level="3"> 11 <option value=""> 请选择 </option> 12 </select> 13 </div> 14 </li>
1 function action_child(){ 2 # 获取会员id 3 $db = $GLOBALS['db']; 4 $ecs = $GLOBALS['ecs']; 5 $user_id = $_SESSION['user_id']; 6 if(isset($_GET['address_id'])){ 7 # 地址列表 8 $add_sql = "select a.*, r1.region_name as r1_title, r2.region_name as r2_title, r3.region_name as r3_title from" 9 .$ecs->table('user_address')." as a left join " 10 .$ecs->table('region')." as r1 on a.province=r1.region_id left join " 11 .$ecs->table('region')." as r2 on a.city=r2.region_id left join " 12 .$ecs->table('region')." as r3 on a.district=r3.region_id " 13 ." where a.user_id=".$user_id." AND a.address_id=".$_GET['address_id']; 14 $address_list = $db->getRow($add_sql); 15 } 16 17 if(isset($_GET['region_id'])){ 18 $id = $_GET['region_id']; 19 $sql = "select * from".$ecs->table('region').' where parent_id='.$id; 20 $rows = $db->getAll($sql); 21 }else{ 22 $sql = "select * from".$ecs->table('region'); 23 $rows = $db->getAll($sql); 24 } 25 26 $arr = array('add'=>$address_list,'region'=>$rows); 27 echo json_encode($arr); 28 die; 29 } 30 31 32 33 function action_address() 34 { 35 # 获取会员id 36 $db = $GLOBALS['db']; 37 $ecs = $GLOBALS['ecs']; 38 $user_id = $_SESSION['user_id']; 39 40 # 地址列表 41 $add_sql = "select a.*, r1.region_name as r1_title, r2.region_name as r2_title, r3.region_name as r3_title from" 42 .$ecs->table('user_address')." as a left join " 43 .$ecs->table('region')." as r1 on a.province=r1.region_id left join " 44 .$ecs->table('region')." as r2 on a.city=r2.region_id left join " 45 .$ecs->table('region')." as r3 on a.district=r3.region_id " 46 ." where a.user_id=".$user_id." and status=0"; 47 $address_list = $db->getAll($add_sql); 48 echo json_encode(array('data' => $address_list)); 49 }