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

第一步:在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. 【锋利的JQuery-学习笔记】Tootip(提示框)

    效果图: 1.当鼠标移动到超链接时,有提示框. 2..当鼠标移动到图片动画旋转 html: <div id="jnNotice"> <div id="j ...

  2. 词法分析器flex的使用

    词法分析器flex的功能说起来就是一句话,将正则表达式转化为c代码. flex编译成功后会生成一个flex.exe的可执行文件.此时,我们需要一个定义了正则表达式 动作的input文件.例如test. ...

  3. c#操作剪切板

    C#定义了一个类System.Windows.Forms.Clipboard来简化剪切板操作,这个类有一个静态方法,主要有: Clear 清除剪切板中的所有数据: ContainsData,Conta ...

  4. WCF 笔记 (2) - 传输泛型 List 对象

    WCF 笔记 (2) - 传输泛型 List 对象 本帖介绍怎么在 WCF 中,在 Server-side 和 Client-side 之间,传递默认无法传输的 List<T>.List& ...

  5. hdoj 2204 Eddy's爱好

    原文链接:http://www.cnblogs.com/DrunBee/archive/2012/09/05/2672546.html 题意:给你一个正整数N,确定在1到N之间有多少个可以表示成M^K ...

  6. Sublime Text 3 搭建 React.js 开发环境

    sublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境. 1. babel 支持ES6, React.js, jsx代码高亮,对 JavaScr ...

  7. 为什么Android 3.0如此罕见?

    3.0(2011年2月)代号蜂巢,专用于android系统的平板电脑,不用于手机.4.0(2011年5月公布)的开发就是让平板电脑和手机能够共用一个版本的系统.4.0通用于平板电脑和手机.

  8. 欧拉工程第71题:Ordered fractions

    题目链接:https://projecteuler.net/problem=71 If n<d and HCF(n,d)=1, it is called a reduced proper fra ...

  9. lintcode:合并区间

    题目: 合并区间 给出若干闭合区间,合并所有重叠的部分. 样例 给出的区间列表 => 合并后的区间列表: [ [ [1, 3], [1, 6], [2, 6], => [8, 10], [ ...

  10. C内存分配函数

    C语言跟内存分配方式(1) 从静态存储区域分配.内存在程序编译的时候就已经分配好,这块内存在程序的整个运行期间都存在.例如全局变量,static变量.(2) 在栈上创建.在执行函数时,函数内局部变量的 ...