dynamically create items in drop down list in bootstrap

Question

Small part of my html code :

<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>

In my js file :

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();
    }

However the menu is appearing but the menu items are not. where am i going wrong

cracker · Accepted Answer · 2014-07-21 09:22:37Z

3

Try This

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

Demo

For Li Click

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

edited Jul 21, 2014 at 9:22

answered Jul 21, 2014 at 7:40

cracker

4,9043 gold badges26 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3840570 Over a year ago

yeah but how do i add the onclick function to these items in the dropdown list now?

user3840570 Over a year ago

even if i add the id like this <li id = "plat"+i> , how do i add click on function to these so that images are displayed on clicking them

cracker Over a year ago

what you want to do exactly?

user3840570 Over a year ago

i need to display images whenever i click on any of the items in the drop down menu. so for that i have attached IDs with all <li> items by doing <li id = "plat"+i> in the loop where i is variable. So that i can do $("#plat"+i).click() later on. but this isnt working. the drop down list is showing but the click function is not linked to the items in the menu

Alex Chizhov · Accepted Answer · 2014-07-21 09:23:32Z

1

$(function(){

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

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

});

Here is the jsfiddle for you http://jsfiddle.net/alexchizhov/ncgXK/

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

Here is another jsfiddle for you http://jsfiddle.net/alexchizhov/ncgXK/4/

edited Jul 21, 2014 at 9:23

answered Jul 21, 2014 at 7:32

Alex Chizhov

1791 gold badge4 silver badges17 bronze badges

2 Comments

user3840570 Over a year ago

yeah but how do i add the onclick function to these items in the dropdown list now? even if i add the id like this <li id = "plat"+i> , how do i add click on function to these so that images are displayed on clicking them

Alex Chizhov Over a year ago

Here you go http://jsfiddle.net/alexchizhov/ncgXK/3/

Collectives™ on Stack Overflow

dynamically create items in drop down list in bootstrap

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related