Question

我试图在页面中制作2个不同的下拉菜单。我已经写了这个引导代码 -

<div class="box">
    <div class="box-header black">
        <div class="col-md-1"></div>
        <div class="col-md-3">
            Set Point Management:
        </div>
        <div class="col-md-1">
            <div class="btn-group">
                <a class="btn dropdown-toggle info" data-toggle="dropdown" href="#">
                    Optimized <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">Manual</a></li>
                    <li><a href="#">Scheduled</a></li>
                    <li><a href="#">Optimized</a></li>
                </ul>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>

    <div class="box-body">
        <div class="col-md-1"></div>
        <div class="col-sm-3 col-md-3">
            <div class="btn-group">
                <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                    Select Operator <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">=</a></li>
                    <li><a href="#">></a></li>
                    <li><a href="#"><</a></li>
                </ul>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>

我正在使用此jquery更改所选组件的下拉列表名称 -

<script type="text/javascript">
    $(".dropdown-menu li a").click(function () {
        $(".btn:first-child").html($(this).text() + ' <span class="caret"></span>');
    });
</script>

一个下拉列表工作正常。但是有了2个下拉列表，当我在一个下拉列表中选择任何项目时，两个下拉列表中的名称标签都会发生变化。

我尝试通过提供ID来区分它们，但是没有工作。那我该怎么写jquery呢？

（逐步回答会很有帮助）

Answer 1

{selector}:first-child伪类指向父元素*内给定选择器的第一个子节点。由于您的行$(".btn:first-child")未指定父级，因此会选择页面上的两个.btn元素。如果您将该行更改为以下内容，则应该有效：

$(".btn:first-child", $(this).closest("div.btn-group")).html(...)

第二个参数给出了搜索选择器的元素，在这种情况下，它成为与btn-group类的a元素最接近的div。

*为了澄清，在这个例子中，将选择两个跨度：

var span = $('span:first-child');

...

<div>
    <span>Alice</span>
</div>
<div>
    <span>Bob</span>
</div>

虽然在此示例中仅选择了Alice：

var span = $('span:first-child');

...

<div>
    <span>Alice</span>
    <span>Bob</span>
</div>

Answer 2

我认为这就是你要找的东西

<强> jsfiddle

代码：

$(".dropdown-menu").each(function () {
var trigger = $(this).find("li a")
var change  = $(this).prev(".btn")
    $(trigger).click(function () {
      $(change).html($(this).text() + ' <span class="caret"></span>');
    });
});

如何为不同的下拉列表编写jquery

2 个答案: