ajax 省市區(qū)多級聯(lián)動（在struts2中），有人能做出個簡單的嗎？？

一、實現(xiàn)思路

金門網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)公司自2013年起到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。

1.獲取省份的列表值，有2種方式：一是返回List集合，在頁面進行迭代；二是在業(yè)務(wù)類中將下拉列表封裝好，頁面通過JQuery方法寫入。

這里暫時采用第二種方法。

2.前臺JQuery：①數(shù)據(jù)庫里面需要存的值，三者都有可能，三選一（判斷是否選中了下面的級聯(lián)項，按選中的最低級項為準值）；

②將三個下拉框的name屬性設(shè)置為變量，便于動態(tài)設(shè)置；③當修改重定位時，因為數(shù)據(jù)庫中只有一個地區(qū)編號，所以需要根據(jù)地區(qū)編號將所在地區(qū)給定位。

定位方法：通過判斷所在地區(qū)的編號后面的零，如果是四個0結(jié)束即為省，二個0即為市，都符合為區(qū)縣。

3.調(diào)用方法：①jsp頁面上引用include/js/cascadeCity.js；②調(diào)用返回省列表的方法provinceOption(操作類型, 省份編號, 城市編號, 區(qū)縣編號);

③修改實體類（該實體類即你要修改的那個實體類），在實體類中添加private String provinceNum;private String cityNum;private String countyNum;

及對應(yīng)的get、set方法（添加實體類中變量可自定義），添加的這3個變量主要用于修改時定位用戶已選城市地區(qū)。

二、實現(xiàn)

1.cascadeCity.js

/*

* subType - 操作類型

* pNum - 省份編號

* cityNum - 城市編號

* countyNum - 區(qū)縣編號

*

*/

function provinceOption(subType, pNum, cityNum, countyNum) {

$.ajax({

type: "POST",

url: "jsonCityAction!provincesInfo.action",

dataType:"text",

success: function(json){

var obj = $.parseJSON(json);

$("#province").html('option value="" selected\u8BF7\u9009\u62E9/option' + obj.gS_Result);

if(subType == "modify") {

//給省份進行下拉框定位

$('#province option[value=' + pNum + ']').attr('selected', 'selected');

}

getCity(subType, pNum, cityNum, countyNum);

},

error: function(json){

alert("json=" + json);

return false;

}

});

}

//改變省份時觸發(fā)

function changeProvince() {

//當操作id為province的下拉框時，觸發(fā)事件

$("#province").change(function() {

var province_value = $("select[id='province'][@selected]").val();

getCity(operateType, province_value);

});

}

function getparmscity(){

var province_value = $("select[id='province'][@selected]").val();

getCity(operateType, province_value);

}

//改變城市時觸發(fā)

function changeCity() {

//當操作id為city的下拉框時，觸發(fā)事件

$("#city").change(function() {

var city_value = $("select[id='city'][@selected]").val();

getCounty(operateType, city_value);

});

}

//返回城市列表

function getCity(subType, pNum, cityNum, countyNum) {

$.ajax({

type: "POST",

url: "jsonCityAction!cityInfo.action?gS_PNum=" + pNum,

dataType:"text",

success: function(json){

var obj = $.parseJSON(json);

$("#city").html('option value="" selected\u8BF7\u9009\u62E9/option' + obj.gS_Result);

if(subType == "modify") {

//給城市定位

$('#city option[value="' + cityNum + '"]').attr('selected',true);

}

getCounty(subType, cityNum, countyNum);

},

error: function(json){

alert("json=" + json);

return false;

}

});

}

//返回區(qū)縣列表

function getCounty(subType, cityNum, countyNum) {

$.ajax({

type: "POST",

url: "jsonCityAction!countiesInfo.action?gS_CityNum=" + cityNum,

dataType:"text",

success: function(json){

var obj = $.parseJSON(json);

$("#county").html('option value="" selected\u8BF7\u9009\u62E9/option' + obj.gS_Result);

if(subType == "modify") {

//給區(qū)縣定位

$('#county option[value="' + countyNum + '"]').attr('selected',true);

}

},

error: function(json){

alert("json=" + json);

return false;

}

});

}

2.jsp頁面:

……

引入js

script src="include/js/jquery-1.4.2.min.js" type="text/javascript"/script

script type="text/javascript" src="include/js/cascadeCity.js"/script

script type="text/javascript"

$(function() {

/***===級聯(lián)城市使用===***/

changetrcompany();

changeProvince(); //改變省份選項時觸發(fā)事件

changeCity(); //改變城市選項時觸發(fā)事件

});

/script

…………

tr

td height="22" class=topline align="right"所屬地區(qū)：/td

td bgcolor="#FFFFFF" height="22"

div

div id="provinceDiv" class="divBL"

select size='1' name="provinceName" id='province' class="sel" /select/div

div id="cityDiv" class="divBL"

select size='1' id='city' class="sel" /select

/div

div id="countyDiv" class="divBL"

select size='1' id='county' class="sel"/select

/div

/div

/td

/tr

3.struts.xml

package name="ajaxSYS" extends="json-default"

action name="jsonCityAction" class="iCityAction"

result type="json"/

/package

/action

4.action類

import javax.annotation.Resource;

import org.springframework.stereotype.Component;

import com.ideamov.service.city.CityService;

import com.opensymphony.xwork2.ActionSupport;

@Component(value = "iCityAction")

public class CityAction extends ActionSupport {

private static final long serialVersionUID = -3234677100675620024L;

private CityService iCityService;

private String gS_PNum; //省份編號

private String gS_CityNum; //城市編號

private String gS_Result; //返回數(shù)據(jù)

public String provincesInfo() throws Exception {

gS_Result = iCityService.getProvincesInfo();

return SUCCESS;

}

public String cityInfo() throws Exception {

gS_Result = iCityService.getCityInfo(gS_PNum);

return SUCCESS;

}

public String countiesInfo() throws Exception {

gS_Result = iCityService.getCountiesInfo(gS_CityNum);

return SUCCESS;

}

/***=====set、get=====***/

public String getgS_Result() {

return gS_Result;

}

public String getgS_PNum() {

return gS_PNum;

}

public void setgS_PNum(String gSPNum) {

gS_PNum = gSPNum;

}

public String getGS_CityNum() {

return gS_CityNum;

}

public void setGS_CityNum(String cityNum) {

gS_CityNum = cityNum;

}

@Resource

public void setCityService(CityService iCityService) {

this.iCityService = iCityService;

}

}

5.業(yè)務(wù)層和dao層就是配合來完成數(shù)據(jù)庫查詢

/**

*

* 方法名: getProvincesInfo

* 方法描述: 獲取省份的列表值

* 參數(shù)： @return

* 返回值：

* 異常：

*

*/

@Override

public String getProvincesInfo() {

StringBuffer sb_Provinces = new StringBuffer();

ListTcPublicProvinces tcPPList = iTcPPDao.findAll(TcPublicProvinces.class, "orderNum", true, new Criterion[]{Restrictions.isNotNull("num")});

for(TcPublicProvinces tcPP : tcPPList) {

sb_Provinces.append("option value='" + tcPP.getNum() + "'" + tcPP.getTitle() + "/option");

}

return sb_Provinces.toString();

}

/**

*

* 方法名: getCityInfo

* 方法描述: 通過省份編號，獲取到城市列表

* 參數(shù)： @param pNum - 省份編號

* 參數(shù)： @return

* 返回值：

* 異常：

*

*/

@Override

public String getCityInfo(String pNum) {

StringBuffer sb_City = new StringBuffer();

ListTcPublicCity tcPCList = iTcPCDao.findAll(TcPublicCity.class, "orderNum", true, new Criterion[]{Restrictions.eq("remark", pNum)});

for(TcPublicCity tcPC : tcPCList) {

sb_City.append("option value='" + tcPC.getNum() + "'" + tcPC.getTitle() + "/option");

}

return sb_City.toString();

}

/**

*

* 方法名: getCountyInfo

* 方法描述: 根據(jù)城市編號，獲取到區(qū)縣列表的值

* 參數(shù)： @param cityNum - 城市編號

* 參數(shù)： @return

* 返回值：

* 異常：

*

*/

@Override

public String getCountiesInfo(String cityNum) {

StringBuffer sb_Countys = new StringBuffer();

ListTcPublicCounties tcPCsList = iTcPCsDao.findAll(TcPublicCounties.class, "orderNum", true, new Criterion[]{Restrictions.eq("remark", cityNum)});

for(TcPublicCounties tcPCs : tcPCsList) {

sb_Countys.append("option value='" + tcPCs.getNum() + "'" + tcPCs.getTitle() + "/option");

}

return sb_Countys.toString();

}

PS：有問題可留蔻蔻，我加你！~good luck！~

三級聯(lián)動怎么回顯 javaweb

以省，市，城聯(lián)動為例：

此小程序的功能主要是采用異步請求方式從數(shù)據(jù)庫中調(diào)取省市區(qū)信息顯示到下拉列表：

代碼如下：

建立數(shù)據(jù)庫中的代碼和一些配置文件信息就省略了，主要有JavaScript中的代碼為：

$(document).ready(function(){

$.get("getProvince.do", function(result){

$("#showp").html(result);

});

})

var xmlhttp;

function mysend(str){

$(document).ready(function(){

$("#show2").html("");

})

var show = document.getElementByIdx_x_x_x_x_x_x_x_x_x("show");

show.innerHTML = "";

var province = document.getElementByIdx_x_x_x_x_x_x_x_x_x("province").value;

if(province!=0){

if(window.XMLHttpRequest){

xmlhttp = new XMLHttpRequest();

}else{

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function(){

if(xmlhttp.readyState==4 xmlhttp.status==200){

show.innerHTML = xmlhttp.responseText;

}

}

var ss = encodeURIComponent(str);

xmlhttp.open("GET","getCity.do?provinceid="+ss,true);

xmlhttp.send(null);

}

}

function myarea(str){

if(window.XMLHttpRequest){

xmlhttp = new XMLHttpRequest();

}else{

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function(){

if(xmlhttp.readyState==4 xmlhttp.status==200){

var show2 = document.getElementByIdx_x_x_x_x_x_x_x_x_x("show2");

show2.innerHTML = xmlhttp.responseText;

}

}

var ss = encodeURIComponent(str);

xmlhttp.open("GET","getArea.do?cityid="+ss,true);

xmlhttp.send(null);

}

html頁面中的代碼為：

所在地

action中的代碼為：

package mobi.zhangsheng.jiejia.action;

import java.io.IOException;

import java.io.PrintWriter;

import java.util.List;

import javax.annotation.Resource;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import org.springframework.stereotype.Controller;

import mobi.zhangsheng.jiejia.domain.Areas;

import mobi.zhangsheng.jiejia.service.AgentsService;

import mobi.zhangsheng.jiejia.service.AreasService;

@Controller

public class ProvinceAction {

private int provinceid;

private int cityid;

@Resource

private AreasService as;

@Resource

private AgentsService ags;

public int getProvinceid() {

return provinceid;

}

public void setProvinceid(int provinceid) {

this.provinceid = provinceid;

}

public int getCityid() {

return cityid;

}

public void setCityid(int cityid) {

this.cityid = cityid;

}

public void getProvince(){

List provinceList = as.getAreasPrvinceList();

HttpServletResponse resp= ServletActionContext.getResponse();

HttpServletRequest request = ServletActionContext.getRequest();

//resp.setContentType("xml");

resp.setContentType("text/html");

resp.setCharacterEncoding("utf-8");

try {

PrintWriter out = resp.getWriter();

out.print("");

//out.print("shanghai");

} catch (IOException e) {

e.printStackTrace();

}

}

public void getCity(){

List cityList = as.getAreasCityList(provinceid);

HttpServletResponse resp= ServletActionContext.getResponse();

//resp.setContentType("xml");

resp.setContentType("text/html");

resp.setCharacterEncoding("utf-8");

try {

PrintWriter out = resp.getWriter();

out.print("");

//out.print("shanghai");

} catch (IOException e) {

e.printStackTrace();

}

}

public void getArea(){

List areaList = as.getAreasCityList(cityid);

if(areaList.size()==0){

}else{

HttpServletResponse resp= ServletActionContext.getResponse();

resp.setContentType("text/html");

resp.setCharacterEncoding("utf-8");

try {

PrintWriter out = resp.getWriter();

out.print("");

} catch (IOException e) {

e.printStackTrace();

}

}

}

}

javaweb項目的菜單如何從數(shù)據(jù)庫獲取實現(xiàn)多級聯(lián)動

用json格式，異步請求，當你點擊一級菜單的時候，js觸發(fā)，通過ajax異步把相關(guān)參數(shù)傳到后臺，查詢出來的數(shù)據(jù)，然后封裝成json格式數(shù)據(jù)返回，js拿到數(shù)據(jù)后，通過js把數(shù)據(jù)設(shè)置到頁面相應(yīng)的地方!

java swing下拉框兩級聯(lián)動

//:ComboBoxText.java

import java.awt.FlowLayout;

import java.awt.event.ActionEvent;

import java.awt.event.ActionListener;

import javax.swing.JComboBox;

import javax.swing.JFrame;

public class ComboBoxText {

private String[][] xxx = {

{"浙江","杭州","溫州","紹興","舟山",},

{"江蘇","南京","無錫","徐州","蒙眬",},

{"上海","閔行區(qū)","普陀區(qū)","金山區(qū)",},

};

private Object[] a(){

Object[] os = new Object[xxx.length];

for(int i=0; ixxx.length; i++){

os[i]=xxx[i][0];

}

return os;

}

private Object[] b(Object a){

for(int i=0; ixxx.length; i++){

if(xxx[i][0].equals(a)){

Object[] o = new Object[xxx[i].length-1];

for(int j=0; jo.length; j++)

o[j]=xxx[i][j+1];

return o;

}

}

return new Object[]{};

}

public static void main(String[] args) {

final ComboBoxText ct = new ComboBoxText();

final JComboBox ca = new JComboBox(ct.a());

final JComboBox cb = new JComboBox();

ca.addActionListener(new ActionListener(){

public void actionPerformed(ActionEvent e) {

cb.removeAllItems();

Object selected = ca.getSelectedItem();

Object[] newItems = ct.b(selected);

for(int i=0; inewItems.length; i++)

cb.addItem(newItems[i]);

}

});

ca.setSelectedIndex(-1);

JFrame f = new JFrame();f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

f.getContentPane().setLayout(new FlowLayout(FlowLayout.LEFT));

f.add(ca);f.add(cb);f.setVisible(true);

f.setSize(200,100);

}

}

文章標題：java代碼實現(xiàn)多級聯(lián)動 js多級聯(lián)動
標題鏈接：http://chinadenli.net/article20/ddeoico.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、響應(yīng)式網(wǎng)站、做網(wǎng)站、虛擬主機、服務(wù)器托管、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)