javascript - 如何使用 Bootstrap 3 在下拉列表中选择默认值？

Question

我想添加一个下拉菜单来选择城市，但不知道如何在选择之前选择默认值。我正在使用 Bootstrap 3。

这是 HTML 标记:

<div class="btn-group">
    <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
        Select City <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="col-md-12 col-sm-12 col-xs-12 no-gutter">
                <h5><img src="images/pk-flag.png" /> PAKISTAN</h5>
            </div><!-- col-md-12 -->
            <div class="col-md-12 col-sm-12 col-xs-12 no-gutter">
                <div class="col-md-6 col-sm-6 col-xs-6">
                    <li><a href="#">Lahore</a></li>
                </div><!-- col-md-6 -->
                <div class="col-md-6 col-sm-6 col-xs-6">
                    <li><a href="#">Islamabad</a></li>
                </div><!-- col-md-6 -->
            </div><!-- col-md-12 -->
            <div class="col-md-12 col-sm-12 col-xs-12 no-gutter">
                <div class="col-md-6 col-sm-6 col-xs-6">
                    <li><a href="#">Karachi</a></li>
                </div><!-- col-md-6 -->
                <div class="col-md-6 col-sm-6 col-xs-6">
                    <li><a href="#">Faisalabad</a></li>
                </div><!-- col-md-6 -->
            </div><!-- col-md-12 -->
            <div class="col-md-12 col-sm-12 col-xs-12 no-gutter">
                <div class="col-md-6 col-sm-6 col-xs-6">
                    <li><a href="#">Multan</a></li>
                </div><!-- col-md-6 -->
                <div class="col-md-6 col-sm-6 col-xs-6">
                    <li><a href="#">KPK</a></li>
                </div><!-- col-md-6 -->
            </div><!-- col-md-12 -->
        </div><!-- col-md-12 -->
    </ul>
</div><!-- btn-group -->

JS代码如下:

/* City Selection DropDown */
$(".dropdown-menu li a").click(function()
{
    var selText = $(this).text();

    $(this).parents('.btn-group')
         .find('.dropdown-toggle')
         .html(selText+' <span class="caret"></span>');
});

这是JsFiddle .

Answer 1

您必须在 js 代码后添加以下代码

$(".dropdown-menu li a")[2].click();

例如:

/* City Selection DropDown */
$(document).ready(function(){ 
    $(".dropdown-menu li a").click(function(){
        var selText = $(this).text();
        $(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');
    });
    $(".dropdown-menu li a")[2].click();
});

您可以输入任意数组值，而不是 2。