目标:要有一个可以输入值的输入框,然后在该输入框的右侧是一个引导下拉按钮,可以在其中选择“存储名称,城市,州或邮编”。
他们会输入名称(比如沃尔玛),然后选择商店名称。当他们选择Store Name时,它会提交表单并发送两个帖子值,由php处理:
搜索字词|搜索类型
以下是按钮的代码:
<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>
答案 0 :(得分:23)
<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']
将是输入的文字,$_POST['search_type']
将是store
,city
,state
或zip
之一。
答案 1 :(得分:5)
对于纯html和css解决方案,请尝试以下方法:
<li>
<input type="submit" class="form-control btn btn-link" name="submit" value="Search State">
</li>
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;
}