電商商家後台-easyUI的combox三級聯動

標籤：

    這幾天在做項目中又用到了easyUI，以前做ITOO的時候前端都是被封裝好的，而且也沒有真正接觸過三級聯動效果。這個三級聯動是要實現的是省市縣聯動。選擇某一個省時跟著相應的市顯示，接著相應的縣顯示。

    不僅是這樣，因為做的是修改功能，所以不僅要把查出來的省，市，縣顯示出來，而且從資料庫中查詢來的地區需要成為預設顯示值。也就是說從資料庫中查出來的地區跟查出來的所有省市區做對比，是資料庫中地區顯示為預設。舉個例子，資料庫中存的是河北省廊坊市燕郊區，那麼顯示在介面上的預設值也必須是河北省廊坊市燕郊區。這也是在我實現中剛開始挺頭疼的一件事，後來經過查詢其實挺簡單的。

首先我把從資料庫中查詢出來的地區，存放到介面上並隱藏起來，然後把從資料庫中查詢出來的所有省份顯示到介面上。其次用JS代碼擷取隱藏的地區，並設定這些地區在下拉框中預設為選中。

    JSP代碼：  

<tr>   <td id="area"><input id="shengyincang" style="display:none;" value="${sheng}"/><input id="shiyincang" style="display:none;" value="${shi}"/><input id="xianyincang" style="display:none;" value="${xian}"/>所在地區:   </td>   <td><select id="sheng" class="easyui-combobox" name="sheng">        <c:forEach var="catage" items="${requestScope.shengList}" varStatus="status"><option style=" width: 100px;" value="${catage.iD}">${catage.province_city}</option></c:forEach></select> <input id="shi" class="easyui-combobox"  name="shi"/> <input id="xian" class="easyui-combobox"  name="xian"/> <span id="cityTip"></span>   </td></tr>

    JS代碼：其實JS代碼實現的很簡單，因為EasyUI的封裝功能真的是很強大啊。

window.onload=function(){//擷取介面上隱藏的地區var shengUID=$("#shengyincang").val();var shiUID=$("#shiyincang").val();var xianUID=$("#xianyincang").val();//var opts=document.getElementById("sheng");//設定地區被選中$("#sheng").combobox('select',shengUID);$("#shi").combobox('select',shiUID);$("#xian").combobox('select',xianUID);}//三級聯動事件，選擇省份，相應所有市跟著出來，選中市相應的縣跟著出來。$(function(){                                                          //觸發省選項$("#sheng").combobox({onSelect:function(record){$("#shi").combobox("setValue",''); //清空市$("#xian").combobox("setValue",''); //清空縣var shengid=$('#sheng').combobox('getValue');$.ajax({async:false,url:"personalprofile_findshi.action",  data:{shengid:shengid},type:"POST",dataType:"json",success:function(data){//alert(data);$("#shi").combobox("loadData",data);}});}});$('#shi').combobox({         editable:false, //不可編輯狀態      cache: false,      panelHeight: '150',//自動高度適合      valueField:'iD',         textField:'province_city'     }); //觸發市選項時$("#shi").combobox({onSelect:function(record){$("#xian").combobox("setValue",''); //清空縣var shiid=$('#shi').combobox('getValue');$.ajax({async : false,url:"personalprofile_findxian.action",cache:false,data:{shiid:shiid},type:"POST",dataType:"json",success:function(data){$("#xian").combobox("loadData",data);}});}});$('#xian').combobox({         editable:false, //不可編輯狀態      cache: false,      panelHeight: '150',//自動高度適合      valueField:'iD',         textField:'province_city'     }); });

   最後：

    

    封裝的固然好，但是嘗試著去瞭解底層，因為只有掌握了底層，我們才能運籌帷幄。以前做ITOO的時候沒覺得什麼，後來做這個項目才發現ITOO封裝的太好了，自己瞭解的太少了，以至於這個項目做起來有點兒生疏。

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

電商商家後台-easyUI的combox三級聯動