Changing/Adding Bootstrap dropdown menu using jQuery

Question

<ul class="dropdown-menu">
   <li><a href="#">Day 1</a></li>
   <li><a href="#">Day 2</a></li>
   <li><a href="#">Day 3</a></li>
 </ul>

For the above snippet , I want to add the drop down menu options from Day 1 to Day 38.(Currently it has three drop down options Day 1,Day2 and Day3).I would really appreciate if some one could point out a sleek way through jQuery to do so .(Very new to jQuery). The class dropdown is from bootstrap.

Not clear at all what you mean by " add the drop down menu options". Please read How to Ask and be far more specific about your problem as well as showing what you have tried to solve it — charlietfl
– charlietfl, Commented May 14, 2016 at 20:07
Edited the question. I want to populate the options using a loop or something similar through jQuery.Since, writing all options right from Day1 to Day 38 would not be feasible. — aman
– aman, Commented May 14, 2016 at 20:14
Again... what have you tried? This isn't a code writing service. You are expected to make your own attempts and do your own basic research and provide code that isn't working as expected when you have problems — charlietfl
– charlietfl, Commented May 14, 2016 at 20:17

Mike · Accepted Answer · 2016-05-15 13:02:28Z

1

If you want a dropdown you would just use a select and probably want to give it a name, id or at least a class:

<select name='day'></select>

Try this jQuery:

for(var i = 1; i<=36; i++) {
    $('<option>').text('Day '+i).appendTo('select[name=day]');
}

Not sure why you were using a ul with li/a. If you want a drop down, use select.

Make sure your script is run after the select is in the dom. You can either place the script lower on the page or wrap it in an ready event like:

$(function(){
    for(var i = 1; i<=36; i++) {
        $('<option>').text('Day '+i).appendTo('select[name=day]');
    }
});

edited May 15, 2016 at 13:02

answered May 14, 2016 at 20:40

Mike

2,6491 gold badge29 silver badges32 bronze badges

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

Collectives™ on Stack Overflow

Changing/Adding Bootstrap dropdown menu using jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related