twitter-bootstrap 文本字段引导程序内的下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27448827/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Drop Down Menu Inside Text Field Bootstrap
提问by Ryan Gray
I want to display my drop down menu inside my text input field using bootstrap:
我想使用引导程序在我的文本输入字段中显示我的下拉菜单：
<script type="text/javascript">
$(document).ready(function(e) {
$('.selectpicker').selectpicker();
$('div.cow').scrollyou();
$("select").selectBoxIt();
});
</script>
<form action="#" method="post" class="form-inline">
<div class="input-append">
<input type="text" class="form-control input-lg" name="domain" size="40" value="Search"/>
<select name="tld[]" class="selectpicker scrollMe" data-size="5" data-live-search="true" multiple data-selected-text-format="values" multiple title='Select Option' data-style="btn-primary" data-width="15%">
<div class="cow">
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
<option>Five</option>
<option>Six</option>
</optgroup>
</div>
</select>
<button class="btn btn-lg btn-inverse" type="submit" value="Search" />
<i class="fa fa-search"></i>
</button>
</form>
</div>
As you can see, I'm using Bootstrap-select and scrollYou for some of the functionality.
如您所见，我使用 Bootstrap-select 和 scrollYou 来实现某些功能。
But how can I get my select field (and options) to display inside the search box?
但是如何让我的选择字段（和选项）显示在搜索框中？
Any help is much appreciated!
任何帮助深表感谢！
回答by Ted
This is the bootstrap way:
这是引导方式：
And with a button on the right:
并在右侧有一个按钮：
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Action
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
As has been pointed out, you've got some real problems with the html you've written. Use the snippets from bootstrap and you should be good to go.
正如已经指出的那样，您编写的 html 存在一些实际问题。使用 bootstrap 中的片段，你应该很高兴。
