动态加载下拉框列表并添加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>