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事件的更多相关文章

  1. jQuery 动态加载下拉框选项（Django）

    function change_style() { $.ajax({ url: "{% url 'change_style' %}", type: "GET", ...

  2. getJSON获取JSON文件加载下拉框及动态验证比输入项

    1.html界面 <form action="" method="get"> <div class="form-group" ...

  3. ASP.NET MVC搭建项目后台UI框架—11、自动加载下拉框查询

    ASP.NET MVC搭建项目后台UI框架—1.后台主框架 需求:在查询记录的时候,输入第一个字,就自动把以这个字开头的相关记录查找出来,输入2个字就过滤以这两个子开头的记录,依次类推. 突然要用到这 ...

  4. echarts异步数据加载(在下拉框选择事件中异步更新数据)

    接触echarts 大半年了,从不会到熟练也做过不少的图表,隔了一段时间没使用这玩意,好多东西真心容易忘了.在接触echarts这期间也没有总结什么东西,今天我就来总结一下如何在echart中异步加载 ...

  5. 微信小程序上拉加载下拉刷新

    微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载 ...

  6. mui scroll和上拉加载/下拉刷新

    mui中 scroll和上拉加载/下拉刷新同时存在会出现两个滚动条 把/*   */ /* //mui页面鼠标拖动代码: mui('.mui-scroll-wrapper').scroll({ dec ...

  7. Vue mint ui用在消息页面上拉加载下拉刷新loadmore 标记

    之前总结过一个页面存在多个下拉加载的处理方式,今天再来说一下在消息页面的上拉加载和下拉刷新,基本上每个app都会有消息页面,会遇到这个需求 需求:每次加载十条数据,上拉加载下拉刷新,并且没有点击查看过 ...

  8. 上拉加载下拉刷新控件WaterRefreshLoadMoreView

    上拉加载下拉刷新控件WaterRefreshLoadMoreView 效果: 源码: // // SRSlimeView // @author SR // Modified by JunHan on ...

  9. RecyclerView 上拉加载下拉刷新

    RecyclerView 上拉加载下拉刷新 <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/teach_s ...

随机推荐

  1. Wall(Graham算法)

    Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 27110   Accepted: 9045 Description Once ...

  2. 1A Theatre Square

    题目大意; 有一个广场,广场的大小是n*m,  有a*a的石砖,石砖铺广场可以比广场大,石砖不能切割.问最少需要多少个石砖. ===================================== ...

  3. MFC重绘函数：InvalidateRect(), Invalidate()和UpdateWindow()

    1. 重绘消息 当需要更新或者重绘窗口时,一般系统会发出两个消息WM_PAINT(通知客户区有变化)和WM_NCPAINT(通知非客户区有变化) WM_NCPAINT系统会自己搞定 WM_PAINT消 ...

  4. PHP删除数组中特定元素

    方法一: <?php $arr1 = array(1,3, 5,7,8); $key = array_search(3, $arr1); if ($key !== false) array_sp ...

  5. Windows下动态库的隐式调用

    多年的工作经验告诉我Windows下使用动态库最简单的方法:使用def导出函数,然后隐式调用. 具体做法如下: (1)首先使用visual studio 创建“Win32项目”,如下图: (2)然后在 ...

  6. JSP基本语法

    在tomcat环境搭建一文中为大家详细的介绍了第一个JSP的程序--Hello World,大家都应该顺利的完成了吧,以此为一个开端,希望大家在学习java EE的路上乘风破浪,不断进步.今天,为大家 ...

  7. 1002 A + B Problem II [ACM刷题]

    这一段时间一直都在刷OJ,这里建一个博客合集,用以记录和分享算法学习的进程. github传送门:https://github.com/haoyuanliu/Online_Judge/tree/mas ...

  8. 自动开机和自动关机设定方法（包括linux和windows）

    (一) linux 机器 1.关机 : 编辑 /etc/crontab添加一条并且保证crontab服务的运行即可 f1 f2 f3 f4 f5 root sudo shutdown –h now 假 ...

  9. 给想上MIT的牛学生说几句

    [来信] 老师您好! 非常冒昧的来打搅您,仅仅是在学习上实在有些困惑才来向您求教一番. 我是计算机科学与技术的大一学生,我非常喜欢我自己的专业,可是学校里讲的东西太慢,太浅,所以我一般都是自学,我在自 ...

  10. UNDERSTANDING VOLATILE VIA EXAMPLE--reference

    We have spent last couple of months stabilizing the lock detection functionality in Plumbr. During t ...