动态加载下拉框列表并添加onclick事件
1. js动态加载元素并设置属性
摘自(http://www.liangshunet.com/ca/201408/336848696.htm)
<div id="parent"></div> function addElementDiv(obj) {
var parent = document.getElementById(obj);
//添加 div
var div = document.createElement("div");
//设置 div 属性,如 id
div.setAttribute("id", "newDiv");
div.innerHTML = "js 动态添加div";
parent.appendChild(div);
}
调用:addElementDiv("parent");
2. bootstrap下拉框
摘自(http://www.w3cschool.cc/bootstrap/bootstrap-v2-dropdown-plugin.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap dropdown with tabs and pills example</title>
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" /> </head>
<body>
<ul class="nav nav-pills">
<li class="dropdown all-camera-dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Tutorials
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li data-filter-camera-type="all"><a data-toggle="tab" href="#">HTML5</a></li>
<li data-filter-camera-type="Alpha"><a data-toggle="tab" href="#">PHP</a></li>
<li data-filter-camera-type="Zed"><a data-toggle="tab" href="#">MySQL</a></li>
<li data-filter-camera-type="Bravo"><a data-toggle="tab" href="#">JavaScript</a></li> </ul>
</li></ul>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
</body>
</html>
3. 根据1、2可得到如下两段代码,获取后台返回数据,动态生成<li>标签
function addLiElement(obj)
{
//data为后台返回的数据
jQuery.getJSON('http://localhost:8080/adep/getModuleData', null, function(data) {
var keys = data.key[0];
var s=document.getElementById(obj) for(var i=0 ; i<keys.length ; i++)
{
var li = document.createElement("li");
var a = document.createElement("a");
li.appendChild(a);
a.innerHTML = keys[i];
a.setAttribute("data-toggle","dropdown");
a.setAttribute("href","#");
s.appendChild(li);
}
});
}
addLiElement("moduleul");
附html代码
<div class="navbar">
<div class="container">
<ul class="nav nav-pills">
<li class="dropdown all-camera-dropdown" id="accountmenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">请选择模块<b class="caret"></b></a>
<ul class="dropdown-menu" id="moduleul">
<li data-filter-camera-type="all"><a data-toggle="tab" href="#">所有模块</a></li>
</ul>
</li>
</ul>
</div>
</div>
动态加载下拉框列表并添加onclick事件的更多相关文章
- jQuery 动态加载下拉框选项(Django)
function change_style() { $.ajax({ url: "{% url 'change_style' %}", type: "GET", ...
- getJSON获取JSON文件加载下拉框及动态验证比输入项
1.html界面 <form action="" method="get"> <div class="form-group" ...
- ASP.NET MVC搭建项目后台UI框架—11、自动加载下拉框查询
ASP.NET MVC搭建项目后台UI框架—1.后台主框架 需求:在查询记录的时候,输入第一个字,就自动把以这个字开头的相关记录查找出来,输入2个字就过滤以这两个子开头的记录,依次类推. 突然要用到这 ...
- echarts异步数据加载(在下拉框选择事件中异步更新数据)
接触echarts 大半年了,从不会到熟练也做过不少的图表,隔了一段时间没使用这玩意,好多东西真心容易忘了.在接触echarts这期间也没有总结什么东西,今天我就来总结一下如何在echart中异步加载 ...
- 微信小程序上拉加载下拉刷新
微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载 ...
- mui scroll和上拉加载/下拉刷新
mui中 scroll和上拉加载/下拉刷新同时存在会出现两个滚动条 把/* */ /* //mui页面鼠标拖动代码: mui('.mui-scroll-wrapper').scroll({ dec ...
- Vue mint ui用在消息页面上拉加载下拉刷新loadmore 标记
之前总结过一个页面存在多个下拉加载的处理方式,今天再来说一下在消息页面的上拉加载和下拉刷新,基本上每个app都会有消息页面,会遇到这个需求 需求:每次加载十条数据,上拉加载下拉刷新,并且没有点击查看过 ...
- 上拉加载下拉刷新控件WaterRefreshLoadMoreView
上拉加载下拉刷新控件WaterRefreshLoadMoreView 效果: 源码: // // SRSlimeView // @author SR // Modified by JunHan on ...
- RecyclerView 上拉加载下拉刷新
RecyclerView 上拉加载下拉刷新 <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/teach_s ...
随机推荐
- svn图形客户端:smartsvn,svnmanager,rapidsvn,svnworkbench,rabbitsvn,Esvn, trac
svn图形客户端: smartsvn,http://www.oschina.net/p/smartsvn, 不用安装直接运行 qsvn, http://www.oschina.net/p/qsvn r ...
- JDK安装配置与升级
一.jdk1.4卸载 Redhat Enterprise 5 中自带安装了jdk1.4,在安装jdk1.6前,把jdk1.4卸载: 1. 首先查看系统自带的JDK版本: [root@linux ~]# ...
- (转载)php flush()刷新不能输出缓冲的原因分析
(转载)http://www.webkaka.com/tutorial/php/2012/110628/ 在php程序编写中,flush()的使用率还是挺高的,它在网页表现即时信息效果时发挥了极为重要 ...
- 数学 ZJOI 2012 数列
#include <iostream> #include <cstring> #include <cstdio> using namespace std; ; st ...
- 类似与fiddler的抓包工具 burp suite free edition
burp suite free edition
- C++递归求解N个元素的所有子集
C++递归求解N个元素的所有子集 引言: 我在复习C++遇到了设计递归函数的问题.这个例子,很好的显示了设计递归的方式,思想. 这与斐波那数列不同,这个例子更有应用意义. 问题: 试编写一个递归函数, ...
- poj2287
田忌赛马的题目- - 贪心策略: 1,如果田忌的最快马快于齐王的最快马,则两者比. (因为若是田忌的别的马很可能就赢不了了,所以两者比) 2,如果田忌的最快马慢于齐王的最快马,则用田忌的最慢马和齐王的 ...
- OpenRisc-43-or1200的IF模块分析
引言 “喂饱饥饿的CPU”,是计算机体系结构设计者时刻要考虑的问题.要解决这个问题,方法大体可分为两部分,第一就是利用principle of locality而引进的cache技术,缩短取指时间,第 ...
- redmine安装插件流程
1.redmine用一键安装即可2.进入C:\Bitnami\redmine-3.1.1-1\,执行use_redmine.exe,进入dos系统 不能用cmd进入.3.把文件拷贝到C:\Bitnam ...
- ASP.NETserver控件使用之Reportviewer 报表
1. Reportviewer 报表 1.1. Reportviewer控件 注:本教程附2个事例: l 演练:在本地处理模式下将数据库数据源与 ReportViewer W ...