9

目標：値を入力できる入力ボックスを作成するには、その入力ボックスの右側に、[店舗名、都市、州、または郵便番号]を選択できるブートストラップドロップダウンボタンがあります。

名前（ウォルマートなど）を入力してから、[ストア名]を選択します。ストア名を選択すると、フォームが送信され、phpで処理される2つの投稿値が送信されます。

検索語| 検索タイプ

これが私がボタンのために持っているコードです：

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

2 に答える 2

26 
<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なります。citystatezip

于 2013-03-26T23:14:15.007 に答える
6

純粋な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;
}
于 2015-10-01T15:16:48.687 に答える