引导输入字段和下拉按钮提交答案

【问题标题】：bootstrap input field and dropdown button submit引导输入字段和下拉按钮提交
【发布时间】：2013-03-16 22:51:53
【问题描述】：

目标：要有一个可以输入值的输入框，然后在该输入框的右侧是一个引导下拉按钮，他们可以在其中选择“商店名称、城市、州或邮编”。

他们会输入名称（比如沃尔玛），然后选择商店名称。当他们选择 Store Name 时，它会提交表单并发送两个 post 值由 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>

【问题讨论】：

标签： forms twitter-bootstrap

【解决方案1】：

<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 之一。

【讨论】：

这是一个绝妙的解决方案。非常感谢。奇怪的是 Bootstrap 如何使用输入/下拉提交按钮，但是找到一个捕获值的解决方案是如此困难。谢谢迈克尔。哦，还有......至少对我来说，我失去了这个解决方案的悬停效果（与超链接列表元素相比。我将它添加到我的实现中。否则，完全按照你写的那样做。谢谢。

【解决方案2】：

对于纯 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;
}

【讨论】：

将 .dropdown 更改为 dropdown-menu 以影响该类。很好的解决方案感谢负载