要实现的效果如下,通过一级标签来控制二级标签,

第一步:在Conctroller中获取数据,并且请到modle里面返回

ModelAndView model = new ModelAndView("/admin/test");
Map<String, List<String>> tagMap = tagService.getTagMap();
model.addObject("tags", tagMap);

第二步:在jsp(注意一定要是jsp)中使用EL表达式读取tagMap的值放到javascript模拟的map里面。(javascript map的实现参考另一遍随笔)

<script type="text/javascript">
var map = new Map();
var vrr;
<c:forEach items="${tags}" var="tag1">
vrr = new Array();
<c:forEach items="${tag1.value}" var="tag2">
vrr.push("${tag2}");
</c:forEach>
map.put("${tag1.key}", vrr);
</c:forEach>
var tag1 = $("#tag1");
vrr = map.keys();
for ( var i = 0; i < vrr.length; i++) {
tag1.append("<option value='"+vrr[i]+"'>" + vrr[i] + "</option>");
}
</script>

第三步:编写tag1的onchange事件

tag = {
"tag1Change" : function() {
tag1 = $("#tag1");
vrr = map.get(tag1.val());
tag2 = $("#tag2");
tag2.empty();
for ( var i = 0; i < vrr.length; i++) {
tag2.append("<option value='"+vrr[i]+"'>" + vrr[i] + "</option>");
}
}
}

  

数据来自后台非Ajax加载的联动实现方法的更多相关文章

  1. jq mobile非ajax加载,ready执行两次

    jqm只有通过ajax加载的页面才只执行一次ready(正常情况) 页面刷新(同非ajax加载的页面)都会执行两次ready,包括pageinit和pageshow事件也是如此. 两种避免的方法是: ...

  2. 一起学爬虫——如何爬取通过ajax加载数据的网站

    目前很多网站都使用ajax技术动态加载数据,和常规的网站不一样,数据时动态加载的,如果我们使用常规的方法爬取网页,得到的只是一堆html代码,没有任何的数据. 请看下面的代码: url = 'http ...

  3. table+ajax加载数据

    //ajax加载notice $(function() { //${pageContext.request.contextPath}/ /** var res = [ {noticeTitle:'必答 ...

  4. jQuery-瀑布流-绝对定位布局(二)(延迟AJAX加载图片)

    jQuery-瀑布流-绝对定位布局(二)(延迟AJAX加载图片)   瀑布流-绝对定位布局,与浮动布局的区别在于 1.布局不一样: 绝对定位:一个UL里面放置所有的绝对定位的LI: 浮动布局:多个(一 ...

  5. jQuery Mobile 手动显示ajax加载器,提示加载中...

    在使用jQuery Mobile开发时,有时候我们需要在请求ajax期间,显示加载提示框(例如:一个旋转图片+一个提示:加载中...).这个时候,我们可以手动显示jQuery Mobile的加载器,大 ...

  6. java调用phantomjs采集ajax加载生成的网页

    java调用phantomjs采集ajax加载生成的网页 日前有采集需求,当我把所有的对应页面的链接都拿到手,准备开始根据链接去采集(写爬虫爬取)对应的终端页的时候,发觉用程序获取到的数据根本没有对应 ...

  7. 获取AJAX加载的内容

    1.有些网页内容使用AJAX加载,AJAX一般返回的是JSON,直接对AJAX地址进行post或get,就返回JSON数据了. 2.用抓包工具分析https://movie.douban.com/j/ ...

  8. Python爬虫-05:Ajax加载的动态页面内容

    1. 获取AJAX加载动态页面的内容 1.1. Introduction 如果所爬取的网址是通过Ajax方式加载的,就直接抓包,拿他后面传输数据的文件 有些网页内容使用AJAX加载,只要记得,AJAX ...

  9. 解决React通过ajax加载数据更新页面不加判断会报错的问题

    通过AJAX加载数据是一个很普遍的场景.在React组件中如何通过AJAX请求来加载数据呢?首先,AJAX请求的源URL应该通过props传入:其次,最好在componentDidMount函数中加载 ...

随机推荐

  1. 灵魂有香气的女子IOS版本APP,近期将考虑开放源代码

    实在太忙,灵魂有香气的女子这个App,断断续续开发了1个多月了,前后台自己独立完成, 由于接触swift没多久,还属于新手行列,不熟悉,希望大家给出意见, 根据意见,完善后将于近期将考虑开放swift ...

  2. 如果使用得当,MySQL 也可以化身 NoSQL

    [编者按]随着互联网和移动互联网的发展,各个机构都需要支撑远超过以往的数据.而在这个需求的刺激下,IT 领域出现了大量数据处理技术,其中之一就是 NoSQL .灵活的数据类型,高效的处理能力,让 No ...

  3. 深入浅出Java并发包—锁机制(三)

    接上文<深入浅出Java并发包—锁机制(二)>  由锁衍生的下一个对象是条件变量,这个对象的存在很大程度上是为了解决Object.wait/notify/notifyAll难以使用的问题. ...

  4. platform_driver_register(),platform_device_register()区别

    设备与驱动的两种绑定方式:在设备注册时进行绑定及在驱动注册时进行绑定. 以一个USB设备为例,有两种情形: (1)先插上USB设备并挂到总线中,然后在安装USB驱动程序过程中从总线上遍历各个设备,看驱 ...

  5. 利用python 获取 windows 组策略

    工作中有时候会有这种需求: 1. 自动配置组策略的安全基线,这个东西不用你自己写了,微软有这个工具,Microsoft Security Compliance Manager,你可以在下面的地址去下载 ...

  6. 2014-9-17二班----10 web project

    package cn.rwkj.servlet; import java.io.IOException; import javax.servlet.ServletException; import j ...

  7. shutdown -s -t

    import java.io.*; import java.awt.*; public class HackDemo{ public static void main(String args[])th ...

  8. WCF入门(六)---主机WCF服务

    建立一个WCF服务后,下一步就是托管它,以便客户端应用程序可以使用,这就是所谓的WCF服务托管. WCF服务可以通过使用任何的四种方法如下托管. IIS主机 - IIS是Internet信息服务的缩写 ...

  9. linux下,如何把整个文件夹上传到服务器(另一台linux)

    1.Linux下目录复制:本机->远程服务器 scp  -r /home/shaoxiaohu/test1  zhidao@192.168.0.1:/home/test2 #test1为源目录, ...

  10. Shell 是个什么玩意

    Shell的定义: 计算机分为软件和硬件,管理计算机硬件的是操作系统,也就是我们说的kernel,而这个核心是需要被保护起来的. 那我们如何通过软件与硬件进行沟通,让硬件执行我们要完成的指令呢? 这个 ...