自舉輸入字段和下拉按鈕提交

Question

目標：要有一個可輸入值的輸入框，那麼在該輸入框的右側是一個引導下拉按鈕，他們可以在其中選擇「存儲名稱，城市，州或郵編」。

他們會輸入姓名（比如沃爾瑪），然後選擇店名。當他們選擇商店名稱時，它會提交表單併發送兩個後處理值由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> 

Answer 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。

Answer 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; 
}