<!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的省市联动效果主要涉及以下几个技术点： 1. jQuery的DOM操作和事件处理：用于获取用户选择的省份并触发Ajax请求。 2. JSON数据格式：用于存储省市关系，便于数据交换。 3. Ajax请求：向...
在“json+jquery+html省市县三级联动”中，主要涉及以下几个关键知识点： 1. JSON数据结构：服务器通常会提供一个包含省市县数据的JSON对象，如： ```json { "province": [ {"id": 1, "name": "北京市", "cities...
总的来说，结合Struts2、jQuery、ajax和MySQL，我们可以实现高效、流畅的省市二级联动效果，提供用户友好的Web界面。这四个技术的协同工作展示了现代Web开发中前后端交互的基本模式，对于任何想要学习Web开发的人来...
在网页开发中，"省市区三级联动"是一...总结，"省市区三级联动"功能的实现主要依赖于jQuery进行DOM操作和事件处理，以及Json作为数据传输和存储的格式。通过合理的前端设计和优化，可以提供流畅、高效的用户交互体验。
《jQuery-JSON省市区街道四级联动插件详解》 在Web开发中，用户常常需要填写地址信息，此时省市区街道的四级联动效果可以提供便捷的用户体验。jQuery作为一款广泛使用的JavaScript库，配合JSON数据格式，可以轻松...
在网页开发中，三级联动是一种常见的交互设计，用于实现如省市县选择的下拉菜单功能。这个"jquery+php+mysql省市县Ajax三级联动代码"是实现这种功能的一个实例，结合了前端JavaScript库jQuery、后端PHP编程语言以及...
### Ajax与jQuery在省市县三级联动中的应用 #### 一、Ajax简介 Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，...
本文将讲述，利用jQuery插件，通过读取JSON数据，实现无刷新动态下拉省市二（三）级联动效果。 HTML 首先在head中载入jquery库和cityselect插件。 [removed][removed] [removed][removed] 接下来，我们在#city中...
在这个项目中，我们看到一个基于SSM实现的省市二级联动功能，利用了Ajax、Jquery和JSON技术。这个功能通常用于在前端展示时，用户选择省份后，自动加载并显示对应的市列表，提供了便捷的交互体验。 首先，我们需要...
ASP.NET 编程知识 - jQuery+Asp.Net 实现省市二级联动功能的方法 本文主要讲述了使用 jQuery 和 Asp.Net 实现省市二级联动功能的方法，涵盖了 HTML、CSS、JavaScript 和 Asp.Net 等技术的应用。 HTML 部分 在 ...
本话题聚焦于“jquery + servlet实现省市联动二级菜单”这一技术实践，这是一个常见的前端与后端协同工作的场景，主要用于提升用户体验，使得用户在选择省份时，市一级的下拉菜单能实时更新为相应省份的城市。...
插件"jquery.tzSelect+二级联动+Json"可能是基于jQuery的一个自定义插件，它专注于实现这种联动效果。jQuery是一个广泛使用的JavaScript库，简化了DOM操作、事件处理、动画以及Ajax交互。通过jQuery，开发者可以更...
SSH+Ajax+JSON在Web开发中的应用主要集中在构建动态、响应迅速的用户界面，这里我们主要探讨Spring、Struts、Hibernate这三大框架如何与Ajax和JSON技术结合，以实现省市级联选择的效果。 首先，Spring是Java企业级...
两级联动选择插件调用： $('.select-value').mPicker({ //级别 level:2, //需要渲染的json，二级联动的需要嵌套子元素，有一定的json格式... jQuery手机端省市二级联动选择代码是一款非常实用的城市选择器插件。
这里提到的"JQuery省、省市二级联动、省市县/区三级联动"是一个使用jQuery库实现的前端解决方案，它能为用户提供流畅且视觉效果良好的交互体验。 jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、...
总的来说，这个二级联动的实现是通过AJAX技术动态获取和更新数据，结合jQuery简化DOM操作，实现了用户交互式的省市区选择功能。这种方式提高了用户体验，减少了不必要的页面刷新，使得数据加载更加高效。
本主题主要关注如何使用XML文件实现省市二级联动效果，以及这种联动在实际应用中的意义。 在网页或应用设计中，省市联动通常用于地理信息的选择，例如用户在填写地址时，先选择省份，接着根据省份选择城市。这种...
在这个“SSH+JQuery+MySQL级联操作（省市县级联）”的案例中，我们将深入探讨如何利用这些技术实现一个省市县三级联动的效果。 首先，让我们了解什么是级联操作。级联操作通常指的是在一个选择发生变化时，相关的...
在本教程中，我们将深入探讨如何使用jQuery库来实现一种常见的网页交互功能——省市二级联动效果。这种效果常用于地址选择，用户在选择省份时，下拉框中的城市选项会根据所选省份动态更新。这既提高了用户体验，也...