html

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>ajax json jquery 菜单案例</title>

<style type="text/css">

*{margin:0;padding:0;}

body { font-size: 13px; line-height: 130%; padding: 60px }

</style>

<link rel="stylesheet" type="text/css" href="../css/style.css"/>

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

<script type="text/javascript">

$(function(){

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

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

 $.ajax({

     type: "POST",

     url: "../jsp/second1.jsp",

     data: "id="+id,

    dataType: "json",

    success: function(data) {

        var cityList=eval(data);

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

        secondRoot.innerHTML=null;

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

        {

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

            op.innerHTML=cityList[i];

            secondRoot.appendChild(op);

        }

    },

    error:function(data){

        alert(data);

    }

    });

});

});

</script>

</head>

<body>

   <select name="first" id="first" style="width:160px">

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

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

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

        <option value="3">英国</option>

    </select>

    <select name="second" id="second" size="3" style="width:160px"></select>

</body>

</html>

jsp

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

<%@ page import="java.util.*,net.sf.json.JSONArray" %>

<%

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

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

    switch(id){

        case 1:

            out.println(JSONArray.fromObject("['上海','广州','山东']"));

            break;

        case 2:

            out.println(JSONArray.fromObject("['美国1','美国2','美国3']"));

            break;

        case 3:

            out.println(JSONArray.fromObject("['英国1','英国2','英国3']"));

            break;

    } 

%>

单行json_ajax的更多相关文章

  1. css实现单行，多行文本溢出显示省略号……

    1.单行文本溢出显示省略号我们可以直接用text-overflow: ellipsis 实现方法: <style> .div_text{width: 300px; padding:10px ...

  2. 谈谈一些有趣的CSS题目（五）-- 单行居中，两行居左，超过两行省略

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  3. css单行文本与多行溢出文本的省略号问题

    在文字布局和代码编写过程中遇到文本溢出是常有的事,下面总结一下对于单行文本溢出和多行文本溢出省略号的处理. 一.单行文本省略号 <p class="text1"> 这是 ...

  4. Oracle_SQL函数-单行函数

    SQL函数 SQL函数分类 SQL函数主要有两种,分为单行函数.多行函数 单行函数:只对一行进行变换,每行返回一个结果.可以转换数据类型,可以嵌套参数可以是一列或一个值 多行函数:多行函数,每次对一组 ...

  5. 10个惊艳的Swift单行代码

    几年前,一篇表述“10个Scala函数式单行代码”的文章非常受欢迎,并且随后立马出现了其他的语言版本,例如Haskell版本,Ruby版本,Groovy版本,Clojure版本,Python版本,C# ...

  6. CSS实现单行与多行文字省略（truncation）

    在上一篇文章小div布局之卡片堆叠(card-stacking)中有多行文字溢出省略的效果,这篇文章就对这种效果(包括单行文字溢出省略)的实现做个简单的记录,以防自己忘记.具体来说,就是要实现这种文字 ...

  7. CSS、j's单行、多行文本溢出显示省略号

    在项目中,由于实际描述文字过多,导致初始页面纵向长度过长,也使得余下信息利用率降低:所以在文字过多的时候,初始化限制行数是有必要的 1. CSS单行文本溢出,显示省略号 <div style=& ...

  8. 单行文字滚动就用myslider

    单行文字滚动就用myslider,myslider是一个小型的内容滚动jquery插件. 首先请看实例:http://keleyi.com/jq/myslider/demo/4.htm 然后来看代码: ...

  9. oracle[insert 时报错: 单行子查询返回多行]

    -- 错误的写法 insert into t_b_partner_vehicle(id, partner_id, vehicle_id) (seq_t_b_partner_vehicle.nextva ...

随机推荐

  1. 在游览器上可以连网，Ionic打包后不能连接网络

    在游览器上可以连网,Ionic打包后不能连接网络.可能是没有安装cordova-plugin-whitelist插件.  解决方案:

  2. Spring MVC的配置与DispatcherServlet的分析

    Spring MVC是一款Web MVC框架,是目前主流的Web MVC框架之一. Spring MVC工作原理简单来看如下图所示: 接下来进行Spring MVC的配置 首先我们配置Spring M ...

  3. map的常用方法

    1.头文件: #include<map> 2.定义: map<string,int>Map; 或: typedef map<string,int> MAP; MAP ...

  4. C#链接数据库增删改查的例子

    以users表为例,有三个字段,自增长的编号id,int类型:名称name,nvarchar类型,密码pwd,nvarchar类型首先在vs2005中引入using System.Data.SqlCl ...

  5. [转载] 解读ClassLoader

    转载自http://www.iteye.com/topic/83978 ClassLoader一个经常出现又让很多人望而却步的词,本文将试图以最浅显易懂的方式来讲解 ClassLoader,希望能对不 ...

  6. HTML基础--position 绝对定位 相对定位 锚点链接

    position 定位属性,检索对象的定位方式 一.语法:position:static /absolute/relative/fixed 取值: 1.static:默认值,无特殊定位,对象遵循HTM ...

  7. 【功能代码】---2.patchca生成验证码

    Java使用patchca生成验证码        Patchca是Piotr Piastucki写的一个java验证码开源库,打包成jar文件发布,patchca使用简单但功能强大. 本例实现了自定 ...

  8. StackExchange.Redis学习笔记(三) 数据库及密码配置 GetServer函数

    这一章主要写一些StackExchange.Redis的配置及不太经常用到的函数 数据库连接 下面是我的连接字符串,里面指定了地址,密码,及默认的数据库 Redis启动后默认会分成0-15个数据库,不 ...

  9. Django 入门案例开发（中）

    昨天已经描述了如何搭建Django的开发环境,今天描述业务流程,具体我们要实现一个什么样的业务: 以下的业务都是假设的(网上书店   页面做的low): 1.用户注册及登录业务: 这是一个网上书店阅读 ...

  10. RabbitMQ和SpringBoot的简单整合列子

    一 思路总结 1 主要用spring-boot-starter-amqp来整合RabbitMQ和SpringBoot 2 使用spring-boot-starter-test来进行单元测试 3编写配置 ...