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
– Vassilis Pits, Commented Nov 13, 2016 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
– felixRo, Commented Nov 14, 2016 at 6:56

Prince Sodhi · Accepted Answer · 2016-11-14 08:05:53Z

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, 2016 at 8:05

answered Nov 13, 2016 at 23:21

Prince Sodhi

2,9852 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

felixRo Over a year ago

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 but it doesn't work, any idea?

felixRo Over a year ago

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 Over a year ago

Yes, on Chrome it seems to be working almost fine, but on Firefox it doesn't work, can you check it?

felixRo Over a year ago

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.

Prince Sodhi Over a year ago

I will chk it or you can try $(document).on('click','#link',function(){...});

|

Community · Accepted Answer · 2017-05-23 11:46:48Z

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, 2017 at 11:46

CommunityBot

11 silver badge

answered Nov 13, 2016 at 22:57

acostache

2,2757 gold badges25 silver badges52 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related