Drop down Menu selected Value using jQuery,Bootsrap

Question

Please i have few dropdowns on my page. I am trying to change selected values and is having a great problem with that. Nothing seems to fire. It seems like my jquery code is not called at all or does it work ?.

I added my drop down in an mvc view that is embedded in a Layout page. Previously i added my Java script code in the layout page header like below.

<script type="text/javascript">
    $(function(){

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

          $(".btn:first-child").text($(this).text());
          $(".btn:first-child").val($(this).text());

       });

    });
    </script>

Below is my my Drop down from my view rendered on my LayoutPage @RenderPage

<div class="btn-group"> 
     <a class="btn btn-default dropdown-toggle btn-select" data-toggle="dropdown">    <span data-bind="label">Select a Country</span>&nbsp;
      <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                <li><a href="#">United States</a></li>
                <li><a href="#">Canada</a></li>
                <li class="divider"></li>
                <li><a href="#"><span class="glyphicon glyphicon-star"></span> Other</a></li>
            </ul>
        </div>

    <div class="btn-group"> 
     <a class="btn btn-default dropdown-toggle btn-select" data-toggle="dropdown">    <span data-bind="label">Select a State</span>&nbsp;
      <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                <li><a href="#">Washingtong</a></li>
                <li><a href="#">California</a></li>
                <li class="divider"></li>
                <li><a href="#"><span class="glyphicon glyphicon-star"></span> Other</a></li>
            </ul>
        </div>

I tried many alternatives as shown in the question Here and didnt succeed. Please where do i go wrong? Any help would be appreciated

@TarekNajem the issue is my Javascript code does not fire. The code is not excuted for some reason. — Nuru Salihu, Feb 12 '15 at 09:17
Open Google Chrome console Ctl + Shift + J and check for errors. Check if jquery library is properly included — softawareblog.com, Feb 12 '15 at 09:24

score 0 · Answer 1 · answered Feb 12 '15 at 10:04

Thanks guys, have found the issue . Just like i suspected my javascrip code was not executing. I just realized my script was written before the jQuery.js script reference. That is like

    <script type="text/javascript">
         My script .
     </script>
<script src="~/Content/js/bootstrap.min.js"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>

I now change it to

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>

 <script type="text/javascript">
             My script .
  </script>

Its now working. So JQuery has to be reference/loaded first. That was the mistake i made. Thank you all.

Drop down Menu selected Value using jQuery,Bootsrap

1 Answers1