<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.6.1.js">
</script>
<script language="JavaScript">
$(function(){
$("#s1").change(function(){
var obj = $("#s1");//取得下拉列表框对象 s1
// alert(obj);
//2. 取得Options 的长度
len = $('#s1 option').length
// alert(len);
//3. 取得所选值 注意,如果option没有value属性,则默认取的是text属性值
obj_value = $('#s1').val();
// alert("$('#s1').val()"+obj_value);
// alert($('#s2').val());
//4. 取得所选中的option
var opt = $("#s1 option:selected");
;
// alert("opt:"+opt);
// alert(opt.text());
// alert(opt.val());
var url = "../jsonServlet";
var param = "name=" + $("#s1 option:selected").text();
alert(param);
$.ajax({
type: "POST",
url: url,
data: param,
cache: false,
dataType: "json",
success: function(msg){
//jsonServlet 返回的是一个JSONArray
alert(msg);
//清空下拉列表框
$("#s2").empty();
//遍历数组
$.each(msg, function(i, text){
alert("数组的索引:" + i);
alert("数组的值:" + text);
//增加option
$("#s2").append("<option>" + text + "</option>")
});
}
})
});
})
</script>
</head>
<body>
<p align="center">
jquery+ json--省市二级联动
</p>
<table align="center">
<tr>
<td>
省份
</td>
<td>
<select id="s1">
<option value="1">省份</option>
<option value="2">湖北</option>
<option value="3">浙江</option>
</select>
</td>
<td>
<select id="s2">
<option>城市</option>
</select>
</td>
</tr>
</table>
</body>
</html>
后台:JsonServlet.java
package com.wepull.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
public class JsonServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String name = request.getParameter("name");
System.out.println("ajax传来的name:"+name);
PrintWriter pw = response.getWriter();
JSONArray array = new JSONArray();
if("湖北".equals(name)){
array.add("武汉");
array.add("宜昌");
array.add("黄石");
array.add("黄冈");
}else if("浙江".equals(name)){
array.add("杭州");
array.add("温州");
array.add("台州");
}
System.out.println(array);
System.out.println("array.toString()"+array.toString());
pw.println(array);
}
}
附:jQuery添加/删除Select的Option项:
1. $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
2. $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)
3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
4. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)
5. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option
5. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option
分享到:
相关推荐
基于jQuery+JSON的省市联动效果
本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果。 HTML 首先在head中载入jquery库和cityselect插件。 [removed][removed] [removed][removed] 接下来,我们在#city中...
在S2SM的框架下,使用Ajax完成的省市二级联动,使用Jquery完成的Ajax,使用JSON,JSONArray完成,在eclipse下即可运行 一直在找类似的资源找不着,干脆自己写一个和大家分享
两级联动选择插件调用: $('.select-value').mPicker({ //级别 level:2, //需要渲染的json,二级联动的需要嵌套子元素,有一定的json格式... jQuery手机端省市二级联动选择代码是一款非常实用的城市选择器插件。
Spring+Struts+Hibernate+Jquery(AJAX)实现的省份与城市级联效果 原理:通过ajax调用后端struts的action,将返回的JSON对象数组解析载入页面。
二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动。本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果。 实现效果:当选择大类时,小类下拉框里的选项内容...
jQuery+JSON的省市三级、二级联动插件
有兴趣刚需的可以自己下载,非常实用的jquery代码,可以完美运行,有能力的还可以二次修改!
仿google搜索提示效果和省市二级联动 基于SSH, 使用了jquery,json
第一种是四级联动省市区镇,第二种是三级联动,可自定义json数据,第三种是带有数据的省市区三级联动。jquery多级联动插件免费下载。
jquery 通用三级联动下拉列表 , 用Jquery实现的三级联动下拉列表插件,压缩包内有多个不同的版本,其实现的基本原理大同小异,无非是调用方式的不同,第一个是通过读取XML构建,支持IE/firefox,chrome不支持,XML...
此代码为beego框架实现的jQuery ajax省市二级联动,前后端交互为json数据。 此代码为beego框架实现的jQuery ajax省市二级联动,前后端交互为json数据。 此代码为beego框架实现的jQuery ajax省市二级联动,前后端交互...
城市地名二级联动、包括全国各个城市的省市的json文件
-增加中国的省市县三级联动示例(data/shengshixian.aspx)(feedback:Blues T)。 -修正了使用IFrameUrl的Tab在切换过程中会重复加载的问题,这是一个在v2.1.6引入的问题(feedback:eroach)。 -修正了启用...
-增加中国的省市县三级联动示例(data/shengshixian.aspx)(feedback:Blues T)。 -修正了使用IFrameUrl的Tab在切换过程中会重复加载的问题,这是一个在v2.1.6引入的问题(feedback:eroach)。 -修正了启用...
内容索引:脚本资源,jQuery,下拉菜单,三级联动 用Jquery实现的三级联动下拉列表插件,压缩包内有多个不同的版本,其实现的基本原理大同小异,无非是调用方式的不同,第一个是通过读取XML构建,支持IE/firefox,...
10-20 5 smarty二级联动 10-20 6 smarty完成静态化 10-20 7 10-20 8 smarty分页技术 10-20 9 10-22 1 ajax介绍 无刷新验证用户名 10-22 2 ajax如何处理xml格式返回数据 10-22 3 json 10-22 4 ajax如何处理json格式...
10-20 5 smarty二级联动 10-20 6 smarty完成静态化 10-20 7 10-20 8 smarty分页技术 10-20 9 10-22 1 ajax介绍 无刷新验证用户名 10-22 2 ajax如何处理xml格式返回数据 10-22 3 json 10-22 4 ajax如何处理json格式...
10-20 5 smarty二级联动 10-20 6 smarty完成静态化 10-20 7 10-20 8 smarty分页技术 10-20 9 10-22 1 ajax介绍 无刷新验证用户名 10-22 2 ajax如何处理xml格式返回数据 10-22 3 json 10-22 4 ajax如何处理json格式...