使用jquery.ajax實現省市的二級聯動(SSH架構)


首先實現jquery ajax的二級聯動 要下載個jquery.js 我在這里就不准備了 自行百度下載

背景介紹:通過部門的ID來查找部門下的所有班級

我實現二級聯動的思路是:先查詢所有部門 顯示在頁面上 如圖 :

 

其次在使用下拉框的點擊事件 獲取到省的ID ,然后通過省的ID 進行查找城市。

jsp代碼

<select style="width:85px" onchange="findCity()" id="provinceId">
<option value="0">請選擇</option>
<c:forEach var="item" items="${provinceList}">
<option value="${item.pid}">${item.pname }</option>

</c:forEach>

</select>

<select style="width:85px" id="cityId">
<option value="0">請選擇</option>
</select>

 

js部分代碼:

function findCity(){

  var provinceId=$("#provinceId").attr("value");

  $.ajax({

    type : "get",

    url  : "{pathContext.request.contextPath}/provinceCity",

    data : {"provinceId" : provinceId},

    success : function(data){

      $("#cityId option").remove();

      $("#cityId").append("<option value='0' >請選擇</option>");

      var cityList=data.citys;

      for(i in cityList){

        $("#cityId").append("<option value ="+cityList[i].cid+">"+cityList[i].cname+"</option>");

      }

    }

 

  });

}

 

action部分代碼(截圖):

struts.xml配置

 

 

 數據庫表:

province表:

city表:

 

 

 最終效果:

 

 

 總結:

我感覺還有一種思路:

在點擊新建時,直接把所有的省,城市全部查出,並且把省名傳入前台select

當選擇省的時候,觸發onchange事件,通過ajax的方法,直接拼接出對應的城市

但是由於時間問題,暫時先不做了


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM