bootstrap select 在 link 上单击时仅显示下拉菜单而不显示 select 按钮

Question

我有一个link：

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

当有人点击 link 时，我只想显示下拉菜单，例如：

如何删除按钮？

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

如果你指的是下拉箭头，对于 Chrome 你可以使用类似的东西：

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

更多请看这个问题：Select removing dropdown arrow.

Answer 2

我更新了我的答案，我认为这就是您要找的。只需更新您的 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;
    }

祝你好运

bootstrap select 在 link 上单击时仅显示下拉菜单而不显示 select 按钮

bootstrap select show only dropdown-menu on link click without the select button

jquery

css

twitter-bootstrap

bootstrap-select