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

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

<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>

Pilih Jenis搜索

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

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

据我所知，你想要一个更传统的

bootstrap下拉列表实际上不应该取代select。要使下拉菜单像select一样运行，需要一些javascript功能（或者类似的功能将是一个很好的选择）

Bootstrap确实带有一个，但它没有做任何花哨的事情

显示了一种使用角度的方法

HTML

---

是的..我实际上看起来更像是一个精选的。。但是我想把它设计成一个下拉菜单。。我想这就是问题的症结所在是的，它必须是一个新的组成部分。我已经编辑了我的答案，包括了如何解决问题的建议。这正是我需要的，但我不想仅仅为了这个而包含angular.js。如果您的解决方案是javascript/jQuery解决方案，我将非常乐意接受

<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>

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