Easyui呼叫資料庫實現省市縣區三級聯動的效果如果下

1、首先要設計資料庫，如圖所示。一個有4個欄位code，note，pycode。code：行政區劃程式碼，note：中文註釋，pycode：拼音縮寫。 其中code是由6個欄位組成。如果是省級最後4位是0000，如果是地級市最後2位是00，其他是縣區。 

2、我用的是java、SSH框架結合Easyui控制元件

3、html程式碼如下

<tr>                               
   <td class="left">省:</td>  
   <td><input name="contact.province" id="province" style="width: 174px;" ></td>     
   <td class="left">市:</td>          
   <td><input  name="contact.city" id="city" style="width: 174px;"></td>                       
   <td class="left">縣區:</td>  
   <td><input name="contact.county" id="county" style="width: 174px;" ></td>
</tr>
 

$(function(){
  
 // 下拉框選擇控制元件，下拉框的內容是動態查詢資料庫資訊
 $('#province').combobox({ 
    url:'apply/provinceCombobox_combobox.action',
    editable:false, //不可編輯狀態
    cache: false,
   // panelHeight: 'auto',//自動高度適合
    valueField:'code',  
    textField:'note',
     
 onHidePanel: function(){
 
   $("#city").combobox("setValue",'');
   $("#county").combobox("setValue",'');
   $("#cregicounty").val('');
  var province = $('#province').combobox('getValue'); 
  if(province!=''){
  $.ajax({
  type: "POST",
  url: "apply/cityCombobox_combobox.action?province="+province,
  cache: false,
  dataType : "json",
  success: function(data){
  $("#city").combobox("loadData",data);
                 }
                }); 
              }
           } 
         }); 
  
 $('#city').combobox({ 
 
   editable:false, //不可編輯狀態
   cache: false,
   //panelHeight: 'auto',//自動高度適合
   valueField:'code',  
   textField:'note',
   onHidePanel: function(){
   $("#cregicounty").val('');
   $("#county").combobox("setValue",'');
  var city = $('#city').combobox('getValue'); 
  if(city!=''){
  $.ajax({
  type: "POST",
  url: "apply/countyCombobox_combobox.action?city="+city,
  cache: false,
  dataType : "json",
  success: function(data){
  $("#county").combobox("loadData",data);
                 }
                }); 
              }
           }
  }); 
 $('#county').combobox({ 
   editable:false, //不可編輯狀態
   cache: false,
  // panelHeight: 'auto',//自動高度適合
   valueField:'code',  
   textField:'note',
   onHidePanel: function(){
     var str=$('#county').combobox('getText');
   $("#cregicounty").val(str); 
           }
 }); 
  
  $('#country').combobox({//國家程式碼初始化 
 valueField:'english',  
   textField:'note',
   url:'json/country.json',
   cache: false,
  //panelHeight: 'auto',//自動高度適合
   onChange: function(newValue,oldValue){ 
 
   countrySearch(newValue);
   countrys(newValue);
   }
 });
}); 
 

//查詢全國行政區程式碼省
 public String provinceCombobox() throws Exception{
  
 List list=comboboxService.findProvince();
 this.jsonUtil(list);
 return null;
 }
  
 //查詢全國行政區程式碼市
 public String cityCombobox() throws Exception{
   
 List list=comboboxService.findCity(province);
 this.jsonUtil(list);
   return null;
 }
  
 //查詢全國行政區程式碼縣區
 public String countyCombobox() throws Exception{
  
 List list=comboboxService.findCounty(city);
 this.jsonUtil(list);
   return null;
 }
  
  
 //呼叫json工具方法，傳入引數alist
 public void jsonUtil(Object accountlist) throws Exception{
  HttpServletResponse response = ServletActionContext.getResponse(); 
  log.info("JSON格式：" + accountlist.toString());
   
  String returnJson = JsonConvert.returnJson(accountlist);
  response.setCharacterEncoding("utf-8");
  response.getWriter().println(returnJson);
 }
 

6、工具JSON程式碼

import java.io.StringWriter;
 
import org.codehaus.jackson.map.ObjectMapper;
 
public class JsonConvert {
 static String jsonStr;
 public static String returnJson(Object object) throws Exception{
 ObjectMapper objectMapper = new ObjectMapper();
 StringWriter stringWriter = new StringWriter();
 objectMapper.writeValue(stringWriter, object);
  
 jsonStr = stringWriter.toString();
 return jsonStr;
 }
}

//查詢省
public List findProvince() throws Exception;
//查詢市
public List findCity(String code) throws Exception;
//查詢縣區
public List findCounty(String code) throws Exception;

 8、對應介面實現類程式碼 

//下拉框--查詢省
public List findProvince() {
log.info("===下拉框--查詢省");
 
Criteria criteria=this.sessionFactory.getCurrentSession().createCriteria(CareacodeTblQg.class);
criteria.add(Restrictions.like("code", "%0000"));
criteria.addOrder(Order.asc("code"));
 
return criteria.list();
}
 
//下拉框--查詢市
public List findCity(String code2) {
log.info("===下拉框--查詢市");
String id=code2.substring(0,2);
 
Criteria criteria=this.sessionFactory.getCurrentSession().createCriteria(CareacodeTblQg.class);
criteria.add(Restrictions.like("code", id+"%00"));
criteria.add(Restrictions.ne("code",code2 ));
criteria.addOrder(Order.asc("code"));
 
return criteria.list();
}
 
//下拉框--查詢縣區
public List findCounty(String code3) {
log.info("===下拉框--查詢縣區");
 
String id=code3.substring(0,4);
Criteria criteria=this.sessionFactory.getCurrentSession().createCriteria(CareacodeTblQg.class); 
 
criteria.add(Restrictions.like("code", id+"%"));
criteria.add(Restrictions.not(Restrictions.like("code", "%01")));
criteria.add(Restrictions.ne("code",code3 ));
criteria.addOrder(Order.asc("code"));
 
return criteria.list();
}

<tr>                               
   <td class="left">省:</td>  
   <td><input name="contact.province" id="province" style="width: 174px;" ></td>     
   <td class="left">市:</td>          
   <td><input  name="contact.city" id="city" style="width: 174px;"></td>                       
   <td class="left">縣區:</td>  
   <td><input name="contact.county" id="county" style="width: 174px;" ></td>
</tr>