终于弄懂了这个级联，我去！必须得在博客记下来。

1, JS代码：

 $(document).ready(function(){

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

         adjustCountyDropDown();

     });

 });

 function adjustCountyDropDown(){

     var selectedCity= $("#select1").val();

     var county= $("#select2");

     if(selectedCity.length== 0){

         county.attr("disabled", true);

     }

     else{

         county.attr("disabled", false);

 　　　　 //ajax异步

         $.getJSON(

         'http://localhost:8080/TestStu/ajaxSelectCityTest',　　//ajax提交的地址，我这里是servlet文件

         {city: selectedCity},　　//传递的参数，将city这个参数传到ajaxSelectCityTest这个servlet

         function(data){　　//data为返回的数据

             county.empty();        //jQuery清空options

             county.append("<option value=''>Please Choose:</option>");

             $.each(data, function(i, value) {

                 county.append("<option value=" + value.add_county + ">" + value.add_county+ "</option>");

             });

         }

         );

     }

 }

2, 后台Servlet

package test.servlet;

import java.io.IOException;

import java.io.PrintWriter;

import java.sql.Connection;

import java.sql.SQLException;

import java.util.ArrayList;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.ruchi.dao.impl.addDaoImpl;

import com.ruchi.entity.addEntity;

import com.ruchi.util.ConnectionFactory;

import net.sf.json.JSONArray;

public class selectCity extends HttpServlet {

    private static final long serialVersionUID = 7609673947157450475L;

    @Override

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        doPost(req, resp);

    }

    @Override

    protected void doPost(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        response.setContentType("text/html;charset=UTF-8");

        response.setHeader("Pragam", "No-cache");

        PrintWriter pw = response.getWriter();

        Connection con = ConnectionFactory.getInstance().makeConnection();

        try {

            List<addEntity> list = new ArrayList<addEntity>();

            // String city= ${Parameter.selectedCity};

            System.out.println("Before : ");

            String city = request.getParameter("city");　　//接收来自前端传来的参数，后面的这个 city 就是第一片JS代码的第18行传来的

            System.out.println("You Just Reciived: "+ city);　　

            addDaoImpl adi = new addDaoImpl();　　//以下为获取后台数据

            list = adi.getCountyByCity(con, city);  //list为获取的所有数据

            JSONArray jsonArray = JSONArray.fromObject(list); //jsonArray为list转为成的JSON数据

            System.out.println(jsonArray.toString());

            pw.print(jsonArray.toString());  //将jsonArray返回到前台 被第一片JS代码的第19行接收

        } catch (SQLException e) {

            e.printStackTrace();

        } finally {

            try {

                con.close();

            } catch (Exception e2) {

                e2.printStackTrace();

            }

            pw.close();　

        }

    }

}

3, JSP页面代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

    <%@page import="java.util.Date"%>

<!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>Insert title here</title>

    <script src= "http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

    <script src="ajaxTest.js"></script>

    <script src="ajaxSelectCityTest.js"></script>

</head>

<body>

    <center>

        <h2>级联</h2>

        <select id="select1">

            <option value="">Please Choose:</option>

            <option value="xiamen">xiamen</option>

            <option value="changsha">changsha</option>

            <option value="anyang">anyang</option>

            <option value="beijing">beijing</option>

        </select>

        <hr />

        <select id="select2">

            <option value=''>Please Choose:</option>

        </select>

    </center>

</body>

</html>

4, 当然还有一些javaBean代码，操作数据库代码以及web.xml配置文件没有贴出来。

欢迎交流！

jQuery+Ajax+Jsp做二级级联的更多相关文章

  1. jquery ajax实现省市二级联动

    今天给大家带来使用jQuery ajax实现的省市联动效果.我们直奔主题,先说下实现思路: 准备数据 这里数据库我使用的是mysql,先看下表格: provience表 city表 这里使用provi ...

  2. Jquery+Ajax下拉框级联查询

  3. jQuery - AJAX 级联变动

    此篇文章主要是用来记忆使用JQUERY+AJAX技术实现 二级级联变动 : 当第一个下拉框变动时,第二个下拉列表框中也将会随之变动. JSP: ---------------------------- ...

  4. jQuery学习之jQuery Ajax用法详解

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  5. jQuery学习之jQuery Ajax用法详解（转）

    [导读] jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍.我们先从最简单的 ...

  6. [转]Jquery Ajax用法

    原文地址:http://www.php100.com/html/program/jquery/2013/0905/6004.html jQuery学习之jQuery Ajax用法详解 来源:   时间 ...

  7. jQuery Ajax用法

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  8. jQuery学习之jQuery Ajax用法详解(转)

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  9. (高级篇)jQuery学习之jQuery Ajax用法详解

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

随机推荐

  1. Python中的isinstance函数

    isinstance是Python中的一个内建函数 语法: isinstance(object, classinfo)   如果参数object是classinfo的实例,或者object是class ...

  2. nyoj 138 找球号(二）（哈希）

    题目:nyoj——138 /*** 哈希求解...采用链表保存 插入时,可以去除重复 查找 找到该组,然后在改组的查找 当这个组不存在时或是没有找到时是 NO 其他是YES 1e6+1 时间最短 */ ...

  3. hdoj 2546 饭卡(0-1背包)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2546 思路分析:该问题为0-1背包问题的变形题:问题求余额最少,设开始的余额为V,则求得用V-5可以买 ...

  4. ollicle.com: Biggerlink – jQuery plugin

    ollicle.com: Biggerlink – jQuery plugin Biggerlink – jQuery plugin Purpose Demo Updated for jQuery 1 ...

  5. [poj 3159]Candies[差分约束详解][朴素的考虑法]

    题意 编号为 1..N 的人, 每人有一个数; 需要满足 dj - di <= c 求1号的数与N号的数的最大差值.(略坑: 1 一定要比 N 大的...difference...不是" ...

  6. cocos2d-x-3.1 Text Labels（官方正式译文）

    介绍 cocos2d支持(true type字体)标签,和纹理地图集标签. LabelTTF 标签的优缺点: 全部 TTF 字体的长处: 随意大小,支持调整字距. 易于使用. 不须要外部编辑器. 创建 ...

  7. Cookie获取、设置值

    设置: HttpCookie cookie = new HttpCookie("cookieName"); cookie.Value = "name1" Htt ...

  8. Cocos2d-x基础篇C++

    1.C++类和对象 类的公有成员可以使用成员访问运算符(.)访问. (::)是范围解析运算符.调用成员函数是在对象上使用(.)运算符. 2.C++继承(C++中父类称为基类,子类称为派生类) clas ...

  9. 200常用JS

    .文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后,产生该文件 &l ...

  10. hdu 3333 Turing Tree

    题目链接 给n个数, m个询问, 每次询问输出区间内的数的和, 相同的数只计算一次. 数组里的数是>-1e9 <1e9, 可以把它离散以后用莫队搞... #include <iost ...