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

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); 
});