javascript - 所有Bootstrap下拉菜单均显示相同的项目

标签 javascript asp.net twitter-bootstrap

我正在使用一段Js代码来显示Bootstrap下拉列表的选定项。我在ASP.NET页上有几个下拉菜单。当我使用此代码并选择第一个(或任何一个)下拉菜单中的一项时,所有其他下拉菜单也会更改其值。我是Javascript和Bootstrap的新手,已经搜索了类似的问题,但未找到任何结果...

JS代码(找到here):

$(function(){
   $(".dropdown-menu li a").click(function(){
     $(".btn:first-child").text($(this).text());
     $(".btn:first-child").val($(this).text());
   });

});


我已经尝试了上述几种有趣的变化。包括一个用div类的名称替换每个下拉列表的“ .btn:first-child”,然后列出所有列表,希望JS知道要更改的下拉列表...不起作用。

使用的标记(我在row / col-md-6中使用几个下拉菜单):

    <div class="row">
        <div class="col-md-6">
            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" id="ddlForwardTo" data-toggle="dropdown">
                    Select a Forward To
                    <span class="caret"></span>
                </button>
              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
              </ul>
            </div>
        </div>
        <div class="col-md-6">
            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" id="ddlManufacturing" data-toggle="dropdown">
                    Select a Manufacturing contact
                    <span class="caret"></span>
                </button>
              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
              </ul>
            </div>
        </div>
    </div>


任何帮助表示赞赏。

更新:



总结超过12个小时的工作量,如果遇到此类错误,请务必清除Google Chrome中的缓存! Chrome会缓存Javascript。

Chrome->工具->清除浏览数据...->选择“缓存的图像和文件”并将其清除。

最佳答案

$(function(){
   $(".dropdown-menu li a").click(function(){
     $(this).parents('.dropdown').children('.btn').text($(this).text());
     $(this).parents('.dropdown').children('.btn').val($(this).text());
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
        <div class="col-md-6">
            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" id="ddlForwardTo" data-toggle="dropdown">
                    Select a Forward To
                    <span class="caret"></span>
                </button>
              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
              </ul>
            </div>
        </div>
        <div class="col-md-6">
            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" id="ddlManufacturing" data-toggle="dropdown">
                    Select a Manufacturing contact
                    <span class="caret"></span>
                </button>
              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
              </ul>
            </div>
        </div>
    </div>





在您点击事件中:

$(this).parents(".dropdown").children(".btn").text($(this).text());


可以将children替换为find

关于javascript - 所有Bootstrap下拉菜单均显示相同的项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26173249/

相关文章:

javascript - 如何将全屏应用于图像

javascript - 当页面加载时Checkbox仅检查一次? ASP.NET,C#

twitter-bootstrap - 增加 Bootstrap 工具提示的水平偏移

css - 使用 Bootstrap 网格强制打印布局的视口(viewport)大小

jquery - 导航栏 Bootstrap 中的全宽搜索栏

javascript - Angularjs/ ionic 类型错误 : Cannot read property 'then' of undefined

javascript - 从 xml 字符串填充 jstree

javascript - Array.find 不是函数错误

asp.net - 如果证书在 .NET 中过期,如何调用 https asmx Web 服务

javascript - CustomValidator在asp.net中无法正常工作