数据来自后台非Ajax加载的联动实现方法
要实现的效果如下,通过一级标签来控制二级标签,

第一步:在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加载的联动实现方法的更多相关文章
- jq mobile非ajax加载,ready执行两次
jqm只有通过ajax加载的页面才只执行一次ready(正常情况) 页面刷新(同非ajax加载的页面)都会执行两次ready,包括pageinit和pageshow事件也是如此. 两种避免的方法是: ...
- 一起学爬虫——如何爬取通过ajax加载数据的网站
目前很多网站都使用ajax技术动态加载数据,和常规的网站不一样,数据时动态加载的,如果我们使用常规的方法爬取网页,得到的只是一堆html代码,没有任何的数据. 请看下面的代码: url = 'http ...
- table+ajax加载数据
//ajax加载notice $(function() { //${pageContext.request.contextPath}/ /** var res = [ {noticeTitle:'必答 ...
- jQuery-瀑布流-绝对定位布局(二)(延迟AJAX加载图片)
jQuery-瀑布流-绝对定位布局(二)(延迟AJAX加载图片) 瀑布流-绝对定位布局,与浮动布局的区别在于 1.布局不一样: 绝对定位:一个UL里面放置所有的绝对定位的LI: 浮动布局:多个(一 ...
- jQuery Mobile 手动显示ajax加载器,提示加载中...
在使用jQuery Mobile开发时,有时候我们需要在请求ajax期间,显示加载提示框(例如:一个旋转图片+一个提示:加载中...).这个时候,我们可以手动显示jQuery Mobile的加载器,大 ...
- java调用phantomjs采集ajax加载生成的网页
java调用phantomjs采集ajax加载生成的网页 日前有采集需求,当我把所有的对应页面的链接都拿到手,准备开始根据链接去采集(写爬虫爬取)对应的终端页的时候,发觉用程序获取到的数据根本没有对应 ...
- 获取AJAX加载的内容
1.有些网页内容使用AJAX加载,AJAX一般返回的是JSON,直接对AJAX地址进行post或get,就返回JSON数据了. 2.用抓包工具分析https://movie.douban.com/j/ ...
- Python爬虫-05:Ajax加载的动态页面内容
1. 获取AJAX加载动态页面的内容 1.1. Introduction 如果所爬取的网址是通过Ajax方式加载的,就直接抓包,拿他后面传输数据的文件 有些网页内容使用AJAX加载,只要记得,AJAX ...
- 解决React通过ajax加载数据更新页面不加判断会报错的问题
通过AJAX加载数据是一个很普遍的场景.在React组件中如何通过AJAX请求来加载数据呢?首先,AJAX请求的源URL应该通过props传入:其次,最好在componentDidMount函数中加载 ...
随机推荐
- SVN库实时同步设置
为了安全起见,SVN服务器除了做定时全量备份和增量备份以外,如条件允许,可做实时备份. 这需要2台机器,一台是master server,另一台做mirror server.master做主服务,mi ...
- Unity3D脚本中文系列教程(十)
http://dong2008hong.blog.163.com/blog/static/4696882720140312627682/?suggestedreading&wumii Unit ...
- [unity3d]手游资源热更新策略探讨
原地址:http://blog.csdn.net/dingxiaowei2013/article/details/20079683 我们学习了如何将资源进行打包.这次就可以用上场了,我们来探讨一下手游 ...
- winform中的checkedListbox数据源绑定
首先看清楚一点 winform下该控件的名称叫做:checkedListbox webform下叫做CheckBoxList 不知道这样起名的用意何在,这个别管了,看看用法吧. web下很简单,直接设 ...
- lintcode:合并区间
题目: 合并区间 给出若干闭合区间,合并所有重叠的部分. 样例 给出的区间列表 => 合并后的区间列表: [ [ [1, 3], [1, 6], [2, 6], => [8, 10], [ ...
- spring autoWire注解和@resource注解区别
1.autoWire注解主要是按类型匹配.因为autowire的扫描机制,是按照接口类型来扫描bean的. 而JSR250 @resource注解是通过名称扫描注入的. @autowire注解的扫描方 ...
- centos下hadoop2.6.0集群搭建详细过程
一 .centos集群环境配置 1.创建一个namenode节点,5个datanode节点 主机名 IP namenodezsw 192.168.129.158 datanode1zsw 192.16 ...
- [Unity菜鸟] 产生各不相同的随机数
1. 网上很多方法都说用时间种子来解决,但是在极短的时间内,这种方法没效 Random r = new Random(DateTime.Now.Millisecond); Random Counter ...
- Orcle数据库查询练习复习:四
一.题目 1.找出张三的最高分和最低分以及对应的课程名 select * from course c,mark m where c.cid=m.cid and sid =(select sid fro ...
- 向安富利(Avnet)学什么?
这个只做电子元器件分销的企业,居然能数次进入<财富>排行榜.看来,这是一个在供应链上创造价值的高手.在企业竞争已经集中到供应链竞争的今天,安富利的成功之道,无疑具有特别的意义. 2000年 ...