twitter-bootstrap 引导输入字段和下拉按钮提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15649001/
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
bootstrap input field and dropdown button submit
提问by John
GOAL: To have a input box where a value can be typed, then to the right of that input box is a bootstrap dropdown button where they can select "Store Name, City, State or Zip".
目标：要有一个可以输入值的输入框，然后在该输入框的右侧是一个引导下拉按钮，他们可以在其中选择“商店名称、城市、州或邮编”。
They would type in name (say Walmart) and then select Store Name. When they select Store Name it would submit the form and send two post values to be handled by php:
他们会输入名称（比如沃尔玛），然后选择商店名称。当他们选择 Store Name 时，它会提交表单并发送两个 post 值以供 php 处理：
search term | search type
搜索词 | 搜索类型
Here is the code I have for the button:
这是我的按钮代码：
<form name="searchForm" id="searchForm" method="POST" />
<div class="input-append">
<input class="span2" id="appendedInputButton" type="text">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Action
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Search Store Names</li>
<li>Search City</li>
<li>Search State</li>
<li>Search Zip Code</li>
</ul>
</div>
</div>
</form>
回答by MichaelRushton
<form name="searchForm" id="searchForm" method="POST" />
<div class="input-append">
<input class="span2" id="appendedInputButton" name="search_term" type="text">
<input class="span2" id="search_type" name="search_type" type="hidden">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Action
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li onclick="$('#search_type').val('store'); $('#searchForm').submit()">Search Store Names</li>
<li onclick="$('#search_type').val('city'); $('#searchForm').submit()">Search City</li>
<li onclick="$('#search_type').val('state'); $('#searchForm').submit()">Search State</li>
<li onclick="$('#search_type').val('zip'); $('#searchForm').submit()">Search Zip Code</li>
</ul>
</div>
</div>
</form>
$_POST['search_term']will be the entered text and $_POST['search_type']will be one of store, city, state, or zip.
$_POST['search_term']将输入的文本，并$_POST['search_type']会之一store，city，state，或zip。
回答by Brent Sandstrom
For a pure html and css solution, try this:
对于纯 html 和 css 解决方案，试试这个：
<li>
<input type="submit" class="form-control btn btn-link" name="submit" value="Search State">
</li>
CSS:
CSS：
.dropdown input {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
height: 26px;
}
.dropdown .btn-link:hover {
text-decoration: none;
background-color: #e8e8e8;
}
