bootstrap select仅显示链接单击时的下拉菜单，没有选择按钮

Question

I have a link:

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

when someone clicks the link I would like to show only the dropdown-menu like:

how to remove the button?

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

I updated my answer and I think this is what you are looking for. just update your 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;
    }

Good Luck

Answer 2

If you mean the dropdown arrow, for Chrome you can use something like:

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

For more, see this question: Select removing dropdown arrow .