bootstrap select在链接点击时只显示下拉菜单而没有选择按钮

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。