需求：
　　使用ajax和jQuery实现下拉框联动。

注意：需要加入jquery-2.1.1.min.js

前台

<!DOCTYPE html>

<html>

<head>

<meta name="author" content="silvan" />

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>

<title>Ajax jQuery下拉框联动案例</title>

<!-- 给select标签添加样式 -->

<style type="text/css">

select {

    width: 160px;

    font-size: 11pt;

}

</style>

</head>

<body>

<form action="hehe">

    <select name="first" id="first" >

        <option value="0">---请选择---</option>

        <option value="1" >中国</option>

        <option value="2">美国</option>

        <option value="3">日本</option>

    </select>

    <select name="second" id="second"></select>

    <script type="text/javascript">

    //$(function(){});=$(document).ready(function(){})，$(function(){})是简写

    $(function(){

        //改变下拉列表值时触发

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

            //获取下拉列表选择值

            var id = document.getElementById("first").value;

            //Ajax调用处理

            $.ajax({

               type: "POST",

               url: "second.jsp",

               data: "id="+id,

               success: function (data ,textStatus, jqXHR) {

                // 将响应数据以$符号分隔成字符串数组

                   var cityList = data.split("$");

                   // 获取用于显示菜单的下拉列表

                   var displaySelect = document.getElementById("second");

                   // 将目标下拉列表清空

                   displaySelect.innerHTML = null;

                   // 以字符串数组的每个元素创建option，

                   // 并将这些选项添加到下拉列表中

                   for (var i = 0 ; i < cityList.length ; i++){

                       // 创建一个<option.../>元素

                       var op = document.createElement("option");

                       op.innerHTML = cityList[i];

                       // 将新的选项添加到列表框的最后

                       displaySelect.appendChild(op);

                   }

               },

               error:function (XMLHttpRequest, textStatus, errorThrown) {

                   alert("请求失败！");

               }

            });

         });

    });

</script>

</form>

</body>

</html>

后台

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

<%

    String idStr = (String)request.getParameter("id");

    int id = idStr == null ? 1 : Integer.parseInt(idStr);

    switch(id){

        case 1:

            out.println("上海$广州$北京");

            break;

        case 2:

            out.println("华盛顿$纽约$加州");

            break;

        case 3:

            out.println("东京$大板$福冈");

            break;

    }

%>

Ajax jQuery下拉框联动案例的更多相关文章

  1. jQuery Ajax MVC 下拉框联动

    无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List<SelectListItem> Tea ...

  2. jQuery下拉框联动(JQ遍历&JQ中DOM操作)

    1.下载jQuery,并导入:https://blog.csdn.net/weixin_44718300/article/details/88746796 2.代码实现: <!DOCTYPE h ...

  3. SSM框架，在Html界面利用ajax，json，jQuery实现省市区下拉框联动

    1.先生成省市区表格 2.建立实体类 3.在html画出下拉框 <select id="province"> <option value="" ...

  4. ajax技术实现登录判断用户名是否重复以及利用xml实现二级下拉框联动，还有从数据库中获得

    今天学了ajax技术,特地在此写下来作为复习. 一.什么是ajax? 客户端(特指PC浏览器)与服务器,可以在[不必刷新整个浏览器]的情况下,与服务器进行异步通讯的技术  即,AJAX是一个[局部刷新 ...

  5. Java Swing应用程序 JComboBox下拉框联动查询

    在web项目中,通过下拉框.JQuery和ajax可以实现下拉框联动查询. 譬如说,当你查询某个地方时,页面上有:省份:<下拉框省份> 市区:<下拉框市区> 县乡:<下拉 ...

  6. Ext 下拉框联动第一次显示不正常的问题

    做下拉框联动,异步加载数据,第一次显示时数据不准确,不要在combo_2的下拉框直接绑定store,在combo_1的改变事件里调用下面的方法 function GetAllCustomerBrand ...

  7. SpringMVC之ajax+select下拉框交互常用方式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. MVC 下拉框联动效果(单选)

    下拉框联动效果,我们以部门--职位为例,选择部门时,关联到该部门的职位.下拉框的写法就不多说了,详细请参照前文. 视图: 其中,dept是部门的属性,deptlist是部门下拉框的属性,job是职位的 ...

  9. html年月日下拉联动菜单 年月日三下拉框联动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 【小超_Android】GitHub源码项目整理,希望对大家有帮助

    收集的经常使用Github上比較优秀的项目,希望对大家日常开发有所帮助: AndroidSlidingMenu   https://github.com/jfeinstein10/SlidingMen ...

  2. 数据结构之---C语言实现广义表头尾链表存储表示

    //广义表的头尾链表存储表示 //杨鑫 #include <stdio.h> #include <malloc.h> #include <stdlib.h> #in ...

  3. iOS 块的简单理解

    占位 自己主动转载器那小子,你转完了没? 转完了,我开写了哈! Block,就两个事儿,一个是引用,一个是实例,除了实现处.其他地方都是引用. 以此思路.再继续看看引用和实现的定义方式吧. 參考官方文 ...

  4. 总结一下这几节Java课的...重点！！！

    1.定义一个Person类,包含两个私有的属性(name.age).一个含参的方法setValue(int age,String name).一个不含参方法setValue()和一个普通方法tell( ...

  5. 在Mac OSX系统的Docker机上启用Docker远程API功能

    在Mac OSX系统的Docker机上启用Docker远程API功能 作者:chszs,未经博主同意不得转载.经许可的转载需注明作者和博客主页:http://blog.csdn.net/chszs D ...

  6. BZOJ3172 单词 Fail树

    题目大意:求一篇论文中每个单词分别在论文中出现多少次. 本题用AC自动机太慢,应该用Fail树将AC自动机中所有的Fail指针反向得到一个新树,这就是Fail树.对长度为x的字符串a和长度为y的字符串 ...

  7. [BZOJ 2100] Apple Delivery

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2100 [算法] Answer = min{ dist(PB,PA1) + dist( ...

  8. Unsupported major.minor version 52.0 (unable to load class XXX

    java项目构建从高版本JDK改为低版本JDK报错.这是再次编译时使用的JDK版本比你原来编译的版本低所导致的. 转自:http://blog.csdn.net/zixiao217 maven项目在服 ...

  9. Gym-101915J The Volcano Eruption 计算几何

    题面 题意:给你一个矩阵,然后有很多的圆,这些圆可能相交着,一个或者几个就导致这个矩形被分割开了,就是从最下面的边到上面的边,连线被这些圆阻隔了,每一堆圆当做一个阻碍,问一共有几个阻碍 题解:看起来好 ...

  10. QlikSense系列(2)——QlikSense安装和升级

    继上篇对QlikSense进行总体介绍之后,想必大家想体验下产品,下面介绍安装的过程和注意点. 注:我的系统环境Windows Server 2008R2,QlikSense版本为3.1SR1 Qli ...