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. Socket 的理解及实例

    Socket 的理解及实例Socket 的理解TCP/IP要想理解socket首先得熟悉一下TCP/IP协议族, TCP/IP(Transmission Control Protocol/Intern ...

  2. jQuery实现checkbox即点即改，批量计数，以及中间遇到的坑

    最近要用jQuery实现一个批量删除操作,效果如下图 最终页面page.html,此页面使用了bootstrap和jQuery,如果没有需要下载一下 <!DOCTYPE html> < ...

  3. css定位讲解

    定位分三种:相对定位,绝对定位,固定定位;     相对定位:position:relatve;     绝对定位:position:absolute; 固定定位:position:fixed; 一, ...

  4. c# 条形码(求指教)

    因公司需要完成一条形码打印问题,所以在找到一些资料做了一个Demo 特请教! 不知道此条形码是否正确: 图: 源码: 代码 ));            }            g.Save();  ...

  5. javascript第十章--Ajax与Comet

    ① XMLHttpRequest对象 ② XMLHttpRequest2级 ③ 进度事件 ④ 跨域源资源共享 ⑤ 其他跨域技术

  6. 线性回归，附tensorflow实现

    本文同步自:https://zhuanlan.zhihu.com/p/30738405 本文旨在通过介绍线性回归来引出一些基本概念:h(x),J(θ),梯度下降法 有一组数据: x=[1,2,3,4, ...

  7. ubuntu16.04安装交叉编译链

    我使用的是arm-linux-gcc 4.3.2版本,其他版本类似,附上下载链接: https://pan.baidu.com/s/1geUOfab 密码: frzy 首先我的安装包是tar.bz2的 ...

  8. osap一站式分析模型

    运营系统分析平台技术设计: 项目定义于运营系统关键指标的数据分析 关键代码描述: HiveWriter 主要用于写hive表抽象,包括加分区,写hive表,写success文件: import org ...

  9. Less命名空间

    Less命名空间 当我们拥有了大量选择器的时候,特别是团队协同开发时,如何保证选择器之间重名问题?如果你是 java 程序员或 C++ 程序员,我猜你肯定会想到命名空间 Namespaces. Les ...

  10. JAVA提高十九：WeakHashMap&EnumMap&LinkedHashMap&LinkedHashSet深入分析

    因为最近工作太忙了,连续的晚上支撑和上班,因此没有精力来写下这篇博客,今天上午正好有一点空,因此来复习一下不太常用的集合体系大家族中的几个类:WeakHashMap&EnumMap&L ...