Javascript 使用jQuery、Bootsrap下拉菜单选择值

Javascript 使用jQuery、Bootsrap下拉菜单选择值,javascript,jquery,css,twitter-bootstrap,Javascript,Jquery,Css,Twitter Bootstrap,请在我的页面上有一些下拉列表。我正在尝试更改选定的值,但遇到了一个很大的问题。似乎什么也没着火。我的jquery代码似乎根本没有被调用,或者它能工作吗 我在嵌入布局页面的mvc视图中添加了下拉列表。之前,我在布局页面标题中添加了Java脚本代码,如下所示 <script type="text/javascript"> $(function(){ $(".dropdown-menu li a").click(function(){ $("

请在我的页面上有一些下拉列表。我正在尝试更改选定的值,但遇到了一个很大的问题。似乎什么也没着火。我的jquery代码似乎根本没有被调用,或者它能工作吗

我在嵌入布局页面的mvc视图中添加了下拉列表。之前,我在布局页面标题中添加了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>

$(函数(){
$(“.LIA”下拉菜单)。单击(函数(){
$(“.btn:first child”).text($(this.text());
$(“.btn:first child”).val($(this.text());
});
});
下面是我在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>



  • 如问题所示,我尝试了许多备选方案,但没有成功。请问我哪里出错了?任何帮助都将不胜感激

    谢谢各位,我们已经找到了问题所在。就像我怀疑我的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。这就是我犯的错误。谢谢大家。

    这是一个工作环境examle@TarekNajem问题是我的Javascript代码没有启动。由于某些原因,该代码未被执行。请打开Google Chrome控制台Ctl+Shift+J并检查错误。检查jquery库是否正确包含谢谢tarek。这很有帮助