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

第一步:在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. hdu 4324 Triangle LOVE(拓扑排序,基础)

    题目 /***************************参考自****************************/ http://www.cnblogs.com/newpanderking ...

  2. IP地址总结

    1.网际协议IP : 网际协议 IP 是 TCP/IP 体系中两个最主要的协议之一.与 IP 协议配套使用的还有四个协议: 地址解析协议 ARP (Address Resolution Protoco ...

  3. hdu 2177 取(2堆)石子游戏 博弈论

    由于要输出方案,变得复杂了.数据不是很大,首先打表,所有whthoff 的奇异局势. 然后直接判断是否为必胜局面. 如果必胜,首先判断能否直接同时相减得到.这里不需要遍历或者二分查找.由于两者同时减去 ...

  4. 2013 Multi-University Training Contest 2 Balls Rearrangement

    先算出lcm(a,b),如果lcm>=n,则直接暴力解决:否则分段,求出0-lcm内的+0-n%lcm内的值. 再就是连续相同的一起计算!! #include<iostream> # ...

  5. String及其他

    String 以下例开始讲解String public class StringDemo { public static void main(String[] args) { // String s ...

  6. 朴素贝叶斯方法(Naive Bayes Method)

        朴素贝叶斯是一种很简单的分类方法,之所以称之为朴素,是因为它有着非常强的前提条件-其所有特征都是相互独立的,是一种典型的生成学习算法.所谓生成学习算法,是指由训练数据学习联合概率分布P(X,Y ...

  7. mysql级联更新的两种方式:触发器更新和外键

    1.mysql级联更新有两种方式:触发器更新和外键更新. 2.触发器更新和外键更新的目的都是为了保证数据完整性. 我们通常有这样的需求:删除表Table 1中记录,需要同时删除其它表中与Table 1 ...

  8. C++:运算符重载函数之友元运算符重载

    5.2.2 友元运算符重载函数 运算符重载函数一般采用两种形式定义: 一是定义为它将要操作的类的成员函数(简称运算符重载函数): 二是定义为类的友元函数(简称为友元运算符重载函数). 1.定义友元运算 ...

  9. 如何学习一个新的PHP框架

    如今的PHP框架层出不穷,我不是这方面的专家,甚至不能熟练地使用其中的一种,所以我不做推荐,也不想讨论哪些算是框架哪些不算框架.这里我要讨论的是如何才能更快地开始使用某个新的框架. 首先你当然必须选择 ...

  10. How to Determine the Version of Oracle XML Publisher for Oracle E-Business Suite 11i and Release 12 (Doc ID 362496.1)

    Modified: 29-Mar-2014 Type: HOWTO In this DocumentGoal   Solution   1. Based upon an output file gen ...