如何在div中放置一個下拉菜單和一個div，以便它可以充當下拉菜單？

Question

我真的很困惑於this。我的容器中有一個標籤和選擇下拉列表，右對齊。

目標 容器應該像一個下拉菜單。只有分類標籤應該在最初顯示。當用戶點擊它時，它應該向用戶展示選項。

問題 我不知道如何觸發下拉，當我點擊按標籤排序。

<div class="container"> 
<label class="Sortlabel">Sort by</label> 
<select> 
    <option>2</option> 
    <option>22</option> 
    <option>222</option> 
</select> 
</div> 

如果我必須使用jQuery或JS，我也會添加這些標籤。有什麼建議麼？？

Answer 1

而正是這一個區別：http://jsfiddle.net/csdtesting/vuc81u87/

結果是一樣的。

<div class="container"> 
    <label class="Sortlabel"></label> 
    <select> 
     <option>Sort by</option> 
     <option>22</option> 
     <option>222</option> 
    </select> 
</div> 

select 
{ 
    width:100%; 
    -webkit-appearance: none; 
} 
.container 
{ 
    float: right; 
    width:190px; 
} 

但是如果你insists.I把這個idea 在這裏它（純JavaScript）：http://jsfiddle.net/csdtesting/ybjdsqrx/

var state = false; 
 

 
// <select> element displays its options on mousedown, not click. 
 
showDropdown = function(element) { 
 
    var event; 
 
    event = document.createEvent('MouseEvents'); 
 
    event.initMouseEvent('mousedown', true, true, window); 
 
    element.dispatchEvent(event); 
 
}; 
 

 
// This isn't magic. 
 
window.runThis = function() { 
 
    var dropdown = document.getElementById('sel'); 
 
    showDropdown(dropdown); 
 
};

select { 
 
    -webkit-appearance: none; 
 
    border: none; 
 
    width: 70%; 
 
} 
 
.container { 
 
    width: 100%; 
 
    float: left; 
 
    width: 190px; 
 
    border: 1px solid; 
 
} 
 
.Sortlabel { 
 
    width: 20%; 
 
} 
 
}

<div class="container"> 
 
    <label class="Sortlabel" onclick="runThis()">Sort by</label> 
 
    <select id="sel"> 
 
    <option></option> 
 
    <option>2</option> 
 
    <option>22</option> 
 
    <option>222</option> 
 
    </select> 
 
</div>