java代码实现多级联动 js多级联动
ajax 省市区多级联动（在struts2中），有人能做出个简单的吗？？
一、实现思路
金门网站制作公司哪家好，找创新互联公司！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设等网站项目制作，到程序开发，运营维护。创新互联公司自2013年起到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联公司。
1.获取省份的列表值，有2种方式：一是返回List集合，在页面进行迭代；二是在业务类中将下拉列表封装好，页面通过JQuery方法写入。
这里暂时采用第二种方法。
2.前台JQuery：①数据库里面需要存的值，三者都有可能，三选一（判断是否选中了下面的级联项，按选中的最低级项为准值）；
②将三个下拉框的name属性设置为变量，便于动态设置；③当修改重定位时，因为数据库中只有一个地区编号，所以需要根据地区编号将所在地区给定位。
定位方法：通过判断所在地区的编号后面的零，如果是四个0结束即为省，二个0即为市，都符合为区县。
3.调用方法：①jsp页面上引用include/js/cascadeCity.js；②调用返回省列表的方法provinceOption(操作类型, 省份编号, 城市编号, 区县编号);
③修改实体类（该实体类即你要修改的那个实体类），在实体类中添加private String provinceNum;private String cityNum;private String countyNum;
及对应的get、set方法（添加实体类中变量可自定义），添加的这3个变量主要用于修改时定位用户已选城市地区。
二、实现
1.cascadeCity.js
/*
* subType - 操作类型
* pNum - 省份编号
* cityNum - 城市编号
* countyNum - 区县编号
*
*/
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;
}
});
}
//改变省份时触发
function changeProvince() {
//当操作id为province的下拉框时，触发事件
$("#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);
}
//改变城市时触发
function changeCity() {
//当操作id为city的下拉框时，触发事件
$("#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;
}
});
}
//返回区县列表
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") {
//给区县定位
$('#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() {
/***===级联城市使用===***/
changetrcompany();
changeProvince(); //改变省份选项时触发事件
changeCity(); //改变城市选项时触发事件
});
/script
…………
tr
td height="22" class=topline align="right"所属地区：/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; //返回数据
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.业务层和dao层就是配合来完成数据库查询
/**
*
* 方法名: getProvincesInfo
* 方法描述: 获取省份的列表值
* 参数： @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
* 方法描述: 通过省份编号，获取到城市列表
* 参数： @param pNum - 省份编号
* 参数： @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
* 方法描述: 根据城市编号，获取到区县列表的值
* 参数： @param cityNum - 城市编号
* 参数： @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！~
三级联动怎么回显 javaweb
以省，市，城联动为例：
此小程序的功能主要是采用异步请求方式从数据库中调取省市区信息显示到下拉列表：
代码如下：
建立数据库中的代码和一些配置文件信息就省略了，主要有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项目的菜单如何从数据库获取实现多级联动
用json格式，异步请求，当你点击一级菜单的时候，js触发，通过ajax异步把相关参数传到后台，查询出来的数据，然后封装成json格式数据返回，js拿到数据后，通过js把数据设置到页面相应的地方!
java swing下拉框两级联动
//: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 = {
{"浙江","杭州","温州","绍兴","舟山",},
{"江苏","南京","无锡","徐州","蒙眬",},
{"上海","闵行区","普陀区","金山区",},
};
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代码实现多级联动 js多级联动
URL分享：http://scjbc.cn/article/ddeoico.html
