引導的鏈接點擊選擇只顯示下拉菜單中沒有選擇按鈕

Question

我有一個鏈接：

<a href="#" id="link">Click me</a> 

當有人點擊了鏈接，我想只顯示下拉菜單，如：

如何去除按鈕？

JSFIDDLE

HTML：

<a href="#" id="link">Click me</a> 

<div id="searchSelect">      
    <select name="searchName" id="idSelect" data-live-search="true" data-size="10"> 
     <option value="">ALL</option> 
     <option value="Tom">Tom</option> 
     <option value="John">John</option> 
     <option value="Janet">Janet</option> 
    </select> 
</div> 

CSS：

#searchSelect 
{ 
    z-index:999; 
    position:absolute; 
    display:none; 
} 

個JS：

$("#idSelect").selectpicker(); 
$("#link").click(function(e) { 
    e.preventDefault(); 
    $("#searchSelect").show(); 
}); 

$("#idSelect").change(function() { 
    $("#searchSelect").hide(); 
}); 

Answer 1

我更新了我的答案，我想這就是你要找的。只需更新你的CSS。

https://jsfiddle.net/n1zz8kkw/2/

 #searchSelect { 
     z-index: 999; 
     position: absolute; 
    } 

    .bootstrap-select.btn-group .dropdown-toggle, 
    .bootstrap-select.btn-group .dropdown-toggle:hover, 
    .bootstrap-select.btn-group .dropdown-toggle:active, 
    .bootstrap-select.btn-group .dropdown-toggle:focus { 
     background: none !important; 
     border: none !important; 
     outline: 0px; 
     box-shadow: none; 
    } 

    .bootstrap-select.btn-group .caret { 
     display: none; 
    } 

    #searchSelect .btn.dropdown-toggle { 
     height: 0px; 
     padding: 0px; 
    } 

    .bootstrap-select.btn-group .filter-option { 
     display: none !important; 
    } 

好運

Answer 2

如果你指的下拉箭頭，Chrome瀏覽器就可以使用類似：

<select style="-webkit-appearance: none;"> 

如需更多信息，請參見該問題：Select removing dropdown arrow。