javascript - 下拉菜单使用 jQuery、Bootstrap 选择值

Question

拜托我的页面上有几个下拉菜单。我正在尝试更改选定的值，但遇到了很大的问题。似乎什么都不火。似乎我的 jquery 代码根本没有被调用或者它是否有效？。

我在布局页面中嵌入的 mvc View 中添加了下拉列表。之前我在布局页眉中添加了我的 Java 脚本代码，如下所示。

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

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

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

       });

    });
    </script>

下面是我在 LayoutPage @RenderPage 上呈现的 View 中的下拉列表

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

我尝试了许多替代方案，如问题 Here 所示并没有成功。请问我哪里出错了？任何帮助将不胜感激

Answer 1

谢谢大家，问题已经找到了。就像我怀疑我的 javascrip 代码没有执行一样。我刚刚意识到我的脚本是在 jQuery.js 脚本引用之前编写的。这就像

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

我现在改成

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

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

它现在可以工作了。所以必须首先引用/加载 JQuery。那是我犯的错误。谢谢大家。