如何使用 Bootstrap 3 在下拉列表中 select 默认值？

Question

我想向 select 个城市添加下拉列表，但不知道如何 select 在 selection 之前设置默认值。我正在使用 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。

如何使用 Bootstrap 3 在下拉列表中 select 默认值？

How do I select a default value in a drop down list using Bootstrap 3?

javascript

jquery

twitter-bootstrap

twitter-bootstrap-3