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

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

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

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

  1. <script type="text/javascript">
  2. var map = new Map();
  3. var vrr;
  4. <c:forEach items="${tags}" var="tag1">
  5. vrr = new Array();
  6. <c:forEach items="${tag1.value}" var="tag2">
  7. vrr.push("${tag2}");
  8. </c:forEach>
  9. map.put("${tag1.key}", vrr);
  10. </c:forEach>
  11. var tag1 = $("#tag1");
  12. vrr = map.keys();
  13. for ( var i = 0; i < vrr.length; i++) {
  14. tag1.append("<option value='"+vrr[i]+"'>" + vrr[i] + "</option>");
  15. }
  16. </script>

第三步:编写tag1的onchange事件

  1. tag = {
  2. "tag1Change" : function() {
  3. tag1 = $("#tag1");
  4. vrr = map.get(tag1.val());
  5. tag2 = $("#tag2");
  6. tag2.empty();
  7. for ( var i = 0; i < vrr.length; i++) {
  8. tag2.append("<option value='"+vrr[i]+"'>" + vrr[i] + "</option>");
  9. }
  10. }
  11. }

  

数据来自后台非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. 【转】System.DateTime.Now.ToString()的一些用法

    C#中的日期处理函数     //2007年4月24日     this.TextBox6.Text = System.DateTime.Now.ToString("D");    ...

  2. poj 2362

    回溯加剪枝 #include <cstdio> #include <cstdlib> #include <cmath> #include <map> # ...

  3. .net RESX资源文件

    RESX资源文件最大的优势就是: 支持多语言 快速创建资源 管理方便 RESX可以支持多语言,Visual Studio编译后会出现附属程序集(satellite assembly),事实上是连接器( ...

  4. Tutorial: Model

    What is a model? Across the internet the definition of MVC is so diluted that it's hard to tell what ...

  5. RN学习1——前奏,app插件化和热更新的探索

    react_native_banner-min.png React Native(以下简称RN)有大量前端开发者的追捧.前端开发是一个活跃的社区,一直尝试着一统前后端,做一个全栈开发,RN就是他们在客 ...

  6. 从一点儿不会开始——Unity3D游戏开发学习(一)

    一些废话 我是一个windows phone.windows 8的忠实粉丝,也是一个开发者,开发数个windows phone应用和两个windows 8应用.对开发游戏一直抱有强烈兴趣和愿望,但奈何 ...

  7. React 性能调优原理

    一.React影响性能的两个地方 二.调优原理

  8. 电容值E系列标称方法

    本节首先介绍常用的E系列标称方法,然后介绍电阻.电容器.电感器.二极管的分类.性能和识别方法,以及简单的实用电路. 一.E系列标称方法 厂家生产的电阻器,并不是包含任何阻值,就像人民币,只有1.2.5 ...

  9. 一步一步开发sniffer(Winpcap+MFC)(一)工欲善其事,必先配环境——配置winpcap开发环境(图文并茂,非常清楚)

    http://blog.csdn.net/litingli/article/details/5950962

  10. vc2005中没有classwizard这个命令

    vc2005中没有classwizard这个命令了 2005下怎么添加鼠标事件 vc2005中没有classwizard这个命令了 取代classwizard 中的添加消息映射,添加类,等等的功能主要 ...