arjwolf arjwolf - 3 months ago 14
CSS Question

Bootstrap Dropdown Select Value Not Working

I have a simple dropdown like this:

<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Choice1</a></li>
<li><a href="#">Choice2</a></li>
<li><a href="#">Choice3</a></li>
<li class="divider"></li>
<li><a href="#">Choice..</a></li>
</ul>
</div>


and JavaScript for choosing one of the options like this:

$(".dropdown-menu li a").click(function(){

$(".btn:first-child").html($(this).text()+' <span class="caret"></span>');

});


My drop down is not working, the option I choose from the dropdown does not get chosen, and in-fact my script.js file doesnt even appear in the source whiles while I try to debug in chrome.

I initialise my script file at the top of my html file like this

<script type="text/javascript" src="source/script.js"></script>


what am I doing wrong ?

Answer

You need to run your code when document is ready:

from jQuery or SO docs:

$( document ).ready(function() {

or

$(function() {

If you run your code before the document is ready your code cannot work because the elements like $(".dropdown-menu li a") are not yet in the document.

So wrap your code in the document ready.

     $(function () {
        $(".dropdown-menu li a").click(function(){

            $(".btn:first-child").html($(this).text()+' <span class="caret"></span>');

        });
    });
Comments