如何在bootstrap 3下拉列表中选择预定义的值

Question

我有以下小提琴here。这一切看起来都很好，但问题是，不是让初始'选择'，而是我想在下拉列表中自动选择第一个选项。我该怎么做？

<div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Pilih Jenis Search <span class="caret"></span></button>
    <ul class="dropdown-menu pull-right">
        <li><a href="#">Barang</a></li>
        <li><a href="#">Toko</a></li>
    </ul>
</div>

现在看来，当您从下拉列表中选择一个值时，它只会转到href中的链接。相反，我想要的是行为就像一个选择框。但接口与我现在的相似。

Answer 1

Bootstrap dropdown功能充当菜单。可以认为它类似于StackOverflow菜单。

根据我的理解，您需要更传统的select。

引导下拉列表实际上不应该是select的替代品。要让下拉列表像select一样需要一些javascript功能（AngularJS或类似功能将是一个很好的选择。）

Bootstrap确实带有select component，但它没有做任何花哨的事情。

This fiddle显示了一种使用Angular的方法。

HTML

<div class="container" ng-controller="searchController">
    <div class="input-group">
        <input id="searchbox" type="text" class="form-control search-query" placeholder="Masukkan produk atau toko yang kamu cari disini">
        <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                {{getSelected()}}
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#" ng-repeat="opt in options track by $index" ng-click="selectOption($index)">{{opt}}</a></li>
            </ul>
        </div>
    </div>
</div>

的Javascript

var app = angular.module("app", []);

var searchController = app.controller("searchController", function($scope) {
    $scope.options = ["Barang", "Toko"];
    $scope.selected = "Pilih Jenis Search";

    $scope.selectOption = function(option) {
        $scope.selected = $scope.options[option];
    }

    $scope.getSelected = function() {
        return $scope.selected;
    }
});