如何在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>