Question

我想在加载下拉按钮的页面时预先定义/选择Bootstrap下拉列表中的一个选项。

这是我的下拉按钮：

<div class="btn-group">
    <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" id = "report" href="#">
        REPORTS
        <span class="caret1"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">NSE</a></li>
        <li><a tabindex="-1" href="#">BSE</a></li>
        <li><a tabindex="-1" href="#">MCX</a></li>
        <li><a tabindex="-1" href="#">SX</a></li>
    </ul>
</div>
<div class="btn-group">
    <a class="btn btn-primary dropdown-toggle" id = "reportType" data-toggle="dropdown" href="#">
        TYPE
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" id = "reportType">
        <li><a tabindex="-1" href="#">EQ</a></li>
        <li><a tabindex="-1" href="#">FO</li>
        <li><a tabindex="-1" href="#">CDS</a></li>
        <li><a tabindex="-1" href="#">SX</a></li>
    </ul>
</div>

这是我的javascript：

$( document ).ready(function() {

   // getUserData({{ data|safe }});

    $(this).parents(".btn-group").find('#report').text('NSE');
    $(this).parents(".btn-group").find('.caret').text('EQ');
    //document.getElementById("report").value= "Hide Filter";
});

我正努力让它发挥作用。

我该怎么做？

Answer 1

以下是：

$( document ).ready(function() {
    $(".dropdown-menu a").on('click', function(e) {
        var span = '<span class="caret"></span>';
        $(this).parents('.btn-group').find('a').eq(0).html($(this).text() +" "+ span);
    });

    $(".dropdown-menu a:contains('EQ')").trigger('click');
    $(".dropdown-menu a:contains('NSE')").trigger('click');
});

我在点击时添加了以便下次点击某个项目时，其显示为已选中。没有点击，以下是代码：

$( document ).ready(function() {
    var span = '<span class="caret"></span>';
    $("#report").html($(".dropdown-menu a:contains('EQ')").text() + span);
    $("#reportType").html($(".dropdown-menu a:contains('NSE')").text() + span);
});

如何使用javascript在Bootstrap中预定义下拉按钮？

1 个答案: