放在哪裏<select>標籤

Question

我想把SELECT標籤放在正確的位置，所以在我的下面的濾鏡菜單中，我也有一切整齊組織，當在智能手機上查看完全相同的樣式結構，在桌面視圖。因此，（1）typeahead框（2）菜單項（3）應用和清除按鈕 - 所有分組在SELECT -/SELECT標籤中，因此它看起來都很好。我不明白。

我的問題是：在哪裏把選擇標籤，因此它看起來都是正確的？

更新：對於「汽車品牌」，我把選擇標籤放在我認爲他們應該去的地方，因此它顯示它弄亂了我的佈局。 對於「輪胎製造商」，這是一個乾淨的佈局，應用選擇標籤時佈局應該如何。

.btn_clear { 
 
    float: right; 
 
\t display: inline-block; 
 
\t box-sizing: border-box; 
 
\t width: 50%; 
 
\t padding: 10px 29px; 
 
\t text-align: center; 
 
\t font-size:10px; 
 
\t background-color:blue; 
 
\t color:#FFF; 
 
} 
 
    
 
.btn_apply { 
 
    float: left; 
 
\t display: inline-block; 
 
\t box-sizing: border-box; 
 
\t width: 50%; 
 
\t padding: 10px 17px; 
 
\t text-align: center; 
 
\t font-size:10px; 
 
\t background-color:red; 
 
\t color:#FFF; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="btn-group"> 
 
      <button class="btn btn-primary" type="button">Car brand</button> <button class="btn btn-primary dropdown-toggle" 
 
      data-toggle="dropdown" type="button"><span class= 
 
      "caret"></span></button> 
 
    <select> 
 
      <div class="dropdown-menu car-brand"> 
 
       <div class="typeahead-box"> 
 
        <input class="car brand" placeholder= 
 
        "Car brand" type="text"> 
 
       </div> 
 
       <div style="position: relative;"> 
 
        <div class=" scrollable-menu" style="margin-bottom: 70px;"> 
 
         <ul> 
 
          <li>mercedes</li> 
 
          <li>audi</li> 
 
          <li>volvo</li> 
 
          <li>renault</li> 
 
          </ul> 
 
         
 
         <div class="div_form"> 
 
          <span class="btn_apply">Apply</span> <span class= 
 
          "btn_clear">Clear</span> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
    </select> 
 
     </div><!--Warning buttons with dropdown menu--> 
 
     <div class="btn-group"> 
 
      <button class="btn btn-primary" type="button">Tyre manufacturer</button> <button class="btn btn-primary dropdown-toggle" 
 
      data-toggle="dropdown" type="button"><span class= 
 
      "caret"></span></button> 
 
      <div class="dropdown-menu tyre-manufacturer"> 
 
       <div class="typeahead-box"> 
 
        <input class="tyre-manufacturer" placeholder="Tyre manufacturer" 
 
        type="text"> 
 
       </div> 
 
       <div style="position: relative;"> 
 
        <div class=" scrollable-menu" style="margin-bottom: 70px;"> 
 
         <ul> 
 
          <li>mercedes</li> 
 
          <li>audi</li> 
 
          <li>volvo</li> 
 
          <li>renault</li> 
 
          </ul> 
 
         
 
         <div class="div_form"> 
 
         <span class="btn_apply">Apply</span> <span class= 
 
          "btn_clear">Clear</span> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div>

Answer 1

你似乎誤解了什麼<select>是。

<select>元素是一種主要用於HTML表單的輸入。允許的內容僅爲<option>或<optgroup>元素。沒有別的東西會有意義，只會搞亂佈局。

<select>用於從多個提供的文本值中選擇一個或多個選項，並存儲該值，直到它被其他一些操作使用，即在大多數情況下提交表單。

您可以將它與您代碼中的下拉菜單進行比較，但主要區別在於，下拉本質上是一組鏈接或按鈕，因此在選擇選項時會執行其操作，而<select>將只是將它存儲爲其他控件的值來使用它。

編輯：

在你的情況，你會離開了下拉的東西，使用這樣的：

<label>Car brand</label> 
<select name="car_brand"> 
    <option>mercedes</option> 
    <option>audi</option> 
</select> 

和查詢這樣的JS值：

document.querySelector("select[name='car_brand']").value 

<select>的缺點是幾乎沒有選擇它的風格。您可以使用替代實施，如Select2，而將您的選擇標記轉換爲可風化標記。

---

看一看MDN或the official documentation有關如何使用<select>元素的進一步信息。