JQuery实例（一）- 二级联动

最新推荐文章于 2023-05-27 23:48:40 发布

橘猫吃不胖胖

最新推荐文章于 2023-05-27 23:48:40 发布

阅读量1.6k

点赞数

分类专栏： JavaScript 文章标签： JQuery 实例二级联动

本文链接：https://blog.csdn.net/yuguiyang1990/article/details/8931800

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

从这里开始的话，会整理一下JQuery的使用，主要是一些例子。

demo.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>JQuery Demo</title>
		
		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="js/province_city.js"></script>
	</head>
	
	<body>
		<center>
			<h3>省市二级联动</h3>
			省份：<select id="sl_province"></select>
			城市：<select id="sl_city"></select>
		</center>
	</body>
</html>

province_city.js

二级联动的总体思想是：

1.有一个省份下拉框，一个城市下拉框，

2.开始的时候，省份下拉框有数据，可以选择省份

3.选择完省份之后，如果选择的内容改变，就会根据省份的ID，动态的从后台获取城市数据

注意：

1.使用JQuery监听省份下拉框的change事件

2.每一次都需要清空城市下拉框的数据

(function() {
	$().ready(function() {
		
		//加载省份数据
		getData('common!queryProvince' , function(data) {
			showData($("#sl_province") , data);
		});
		
		//监听省份下拉框的改变
		$("#sl_province").change(function() {
			var id = $("#sl_province").val();
			
			//清空数据
			$("#sl_city").text("");

			if(id > 0) {
				getData('common!queryCity?id=' + id , function(data) {
					showData($("#sl_city") , data);
				});
			}
		});
		
		/**
		 * 查询数据
		 */
		function getData(url , callback) {
			$.ajax({
				type: 'get',
				url: url ,
				dataType: 'json',
				
				success: function(data) {
					callback(data);
				}
			});
		}
		
		
		
		/**
		 * 显示数据
		 */
		function showData(obj , data) {
			//遍历数据
			$.each(data , function(i,element){
				if(i == 0) {
					obj.append("<option  selected>请选择</option><option value='"+element.id+"'>"+element.name+"</option>");
				} else {
					obj.append("<option value='"+element.id+"'>"+element.name+"</option>");
				}
			});
		}
		
		//动态修改城市数据
	});
})();

JQueryAction.java

package org.ygy.jquery.action;

import java.util.ArrayList;
import java.util.List;

import org.ygy.jquery.vo.SimpleVO;

import com.opensymphony.xwork2.ActionSupport;

public class JQueryAction extends ActionSupport {
	private static final long serialVersionUID = 6797154008479295854L;
	
	private List<SimpleVO> voList;
	private Integer id;
	
	public Integer getId() {
		return id;
	}

	public void setId(Integer id) {
		this.id = id;
	}


	public List<SimpleVO> getVoList() {
		return voList;
	}


	public void setVoList(List<SimpleVO> voList) {
		this.voList = voList;
	}


	/**
	 * 获取省份信息
	 * @return
	 */
	public String queryProvince() {
		voList = new ArrayList<SimpleVO>();
		voList.add(new SimpleVO(1 , "山东省"));
		voList.add(new SimpleVO(2 , "辽宁省"));
		voList.add(new SimpleVO(3 , "江苏省"));
		
		return SUCCESS;
	}
	
	/**
	 * 获取城市信息
	 * @return
	 */
	public String queryCity() {
		voList = new ArrayList<SimpleVO>();
		
		switch(id) {
		case 1:
			voList.add(new SimpleVO(10 , "青岛市"));
			voList.add(new SimpleVO(11 , "济南市"));
			voList.add(new SimpleVO(12 , "烟台市"));
			
			break;
		case 2:
			voList.add(new SimpleVO(20 , "丹东市"));
			voList.add(new SimpleVO(21 , "大连市"));
			voList.add(new SimpleVO(22 , "沈阳市"));
			voList.add(new SimpleVO(23 , "鞍山市"));
			
			break;
		case 3:
			voList.add(new SimpleVO(30 , "无锡市"));
			voList.add(new SimpleVO(31 , "常州市"));
			
			break;
		}
		
		return SUCCESS;
	}
}

SimpleVO.java

package org.ygy.jquery.vo;

import java.io.Serializable;

public class SimpleVO implements Serializable {
	private static final long serialVersionUID = 8269923725710560925L;

	private Integer id;
	private String name;
	
	public SimpleVO() {}
	
	public SimpleVO(Integer _id , String _name) {
		this.id = _id;
		this.name = _name;
	}

	public Integer getId() {
		return id;
	}

	public void setId(Integer id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

}

struts.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
	<constant name="struts.i18n.encoding" value="utf-8"></constant>
	<constant name="struts.multipart.maxSize" value="20971520"/>
    <constant name="struts.devMode" value="true" />
    
	
	<package name="p_province" extends="json-default" namespace="/">
		<action name="common" class="org.ygy.jquery.action.JQueryAction">
			<result name="success" type="json">
				<param name="root">voList</param>
			</result>
		</action>
	</package>
</struts>

橘猫吃不胖胖

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery实例（一）- 二级联动

从这里开始的话，会整理一下JQuery的使用，主要是一些例子。demo.jsp<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> JQuery Demo 省市二级联动省份：城
复制链接

扫一扫

专栏目录