國省市縣 ajax 地區級聯動
阿新 • • 發佈：2019-01-10
國家 省 市 縣/地區 地區級聯動 實現
1：在HTML 頁面 常常有這樣的格式 點選父級元素出現子元素，原理都是懂得這裡給大家來實現
<tr> <td> <span style="font-weight: bold">住址</span> <br/> 國家 <select name="address" id=""> <option value="0" checked> 請選擇 </option> <?php foreach($region_list as $v):?> <option value=<?= $v['region_id'] ?>> <?=$v['region_name']?> </option> <?php endforeach;?> </select> </td> </tr>
2：要記得 在html頁面引入jquery檔案 然後進行事件繫結 通過json的ajax傳值 來獲得效果 下面是程式碼
<script> //定義載入函式 //把input物件委託給document物件 $(document).on("change",":input[name='address']",function(){//給動態的內容父級物件繫結change事件 //給select一個內容改變事件 // $(":input[name='region']").change(function(){ //獲取region_id var region_id=$(this).val(); //當前對向，追加時用 // alert(region_id); $(this).nextAll().remove(); //清除一級後所有的無資料的重複追加 //將下拉框裡的請選擇的value值設為0，防止點選請選擇的時候繼續追加 if(region_id==0){ return false; //選擇為空 下面的ajax請求不觸發 } //ajax請求 var url="?r=course/get"; //請求地址 $.getJSON(url,{'region_id':region_id},function(msg){ if(msg.length>0){//避免二級後面繼續追加 var str='<select name="address">\ <option value="0" >...請選擇...</option>'; $.each( msg, function(k,v){ str+="<option value="+ v.region_id+" >"+ v.region_name+"</option>"; }); str+="</select>"; } $(this).after(str); }.bind(this)) //console.log( $(":input[name='address']:last").val()); $('#s_address').val($(":input[name='address']:last").val()) }) </script>
3：將父級 Id 傳到後臺
將 id 接到 $sql="select * from region where parent_id= $id "
將自己元素查到 ， 並 用過 echo json_encode($data) 的方法 將得到資料轉（這裡一般是一個二維陣列）換成json格式，返回到前臺，前臺再處理
上邊的程式碼 是我做一個註冊使用者時需要的 國家，省，市，地區/縣, 的多級聯動 下面是一個 需要選擇省把所需要的市的展示出來，明白原理會一點jquery就可以輕鬆實現這個功能了
$(document).on('change','#province',function(){ //通過繫結事件 var province=$(this).val(); var str=""; $.ajax({ type:'get', url: "{{url('getCityByPro_id')}}", data:{pro_id:province}, dataType:'json', success:function(msg){ str+='<select name="" id="">'; str+='<option value="">請選擇城市</option>'; $.each(msg,function(k,v){ str+="<option>"+ v.region_name+"</option>"; }); str+='</select>'; $('#City').html(str); // console.log(str); } }); })
4:在多提一句 在提交資料的時候只需要提交最後一個選擇的地區的 id就可以 這裡就需要
$('#s_address').val($(":input[name='address']:last").val())