在bootstrap中的下拉列表中动态创建项目

时间:2014-07-21 07:28:20

标签: javascript jquery twitter-bootstrap

我的HTML代码的一小部分:

<div class="text-center">

        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                Platforms <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" id = "buttonsPlace">
            </ul>

        </div>

在我的js文件中:

for (i = 0; i < platformList.length; i++) {
        var li =  $("<li/>" , { id : "plat"+i,class : "dropdown" text : platformList[i]  } )
        //var text = document.createTextNode(platformList[i]);
        //li.appendChild(text);
        //btn.data("platform", platformList[i] );
         $("#buttonsPlace").append(li);
        console.log("hiding");
        $("#plat" + i).hide();
    }

但是菜单出现但菜单项没有出现。哪里出错了

2 个答案:

答案 0 :(得分:3)

试试这个

$(function() {
    var change = function( txt ) {
        $("#ID").append( '<li>' + txt + '</li>' );
    };
    change("this is the first change");
    change("this is the second change");
});

Demo

李娜点击

$("ul").on('click', 'li', function () {
   var id = this.id;
   //play with the id
});

答案 1 :(得分:0)

$(function(){

    $('.dropdown-toggle').click(function(){

        var countRows = $('ul.dropdown-menu li').size();
        $('.dropdown-menu').append('<li>Row '+countRows+'</li>');
        countRows++;
    });

});

以下是jsfiddle http://jsfiddle.net/alexchizhov/ncgXK/

$('#drowdown-link1').click(function(e){
   e.preventDefault();
   window.location.href = 'http://example.com';
});

这是另一个jsfiddle给你http://jsfiddle.net/alexchizhov/ncgXK/4/