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

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();
});

There is no button in your example. What do you mean "button"? — Vassilis Pits, Nov 13 '16 at 22:53
Yes, what I need is, that after user clicks the link it will go straight to dropdown-menu. Now it works like it shows the select button with the caret and you have to click it again to see options. — felixRo, Nov 14 '16 at 06:56

Prince Sodhi · Accepted Answer · 2016-11-14T08:05:53.393

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

edited Nov 14 '16 at 08:05

answered Nov 13 '16 at 23:21

Prince Sodhi

2,845
2
21
35

Thank you, but it only removes the button's styling (as you said too). I need to remove everything the whole select button with caret, and it should show already opened dropdown-menu. I tried to use `$('#idSelect').selectpicker('toggle');` [JSFIDDLE](https://jsfiddle.net/n1zz8kkw/1/) but it doesn't work, any idea? – felixRo Nov 14 '16 at 07:01
I'm not sure, but I think it doesn't work your jsfiddle code, because if I click the link it shows only the outline and not the opened dropdown menu. – felixRo Nov 14 '16 at 09:00
Yes, on Chrome it seems to be working almost fine, but on Firefox it doesn't work, can you check it? – felixRo Nov 14 '16 at 09:49
the same I'm getting on Chrome, Opera, but not on FF. It seems to be a problem with `toggle` method. The toggle doesn't work inside other event like click or change on FF. – felixRo Nov 14 '16 at 10:51
I will chk it or you can try $(document).on('click','#link',function(){...}); – Prince Sodhi Nov 14 '16 at 11:24
Ok i'm out now but I will try to help u. – Prince Sodhi Nov 14 '16 at 11:49
Seems to be working fine now, new JSFIDDLE I had to add setTimeout function and works on FF as well, but don't know why FF behaves like that. Thank you for helping. – felixRo Nov 14 '16 at 14:11

score 0 · Answer 2 · edited May 23 '17 at 11:46

0

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.

edited May 23 '17 at 11:46

Community

1
1

answered Nov 13 '16 at 22:57

acostache

2,177
7
23
48

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

2 Answers2