Custom Select tag like behaviour using bootstrap button and dropdown element

Question

$('.btn-group').on('focus', '.dropdown-menu li a', function() {

  $(this).parents('.dropdown-menu').find('li').removeClass('active');
  $(this).parent('li').addClass('active');


  //Displays selected text on dropdown-toggle button
  $(this).closest(":has(button)").find('button').html('<div class="dropDownSelected">' + $(this).html() + '</div>' + '<span class="caret" style="float:right;"></span>');

});

.btn-group,
.dropdown-menu {
  max-width: 150px;
}
.dropdown-menu li a {
  white-space: normal!important;
  ;
}
.dropDownSelected {
  white-space: normal;
  margin-right: 22px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Action <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a>
      </li>
      <li><a href="#">Another action</a>
      </li>
      <li><a href="#">Something else here</a>
      </li>
      <li><a href="#">Separated link which is of two lines or more</a>
      </li>
    </ul>
  </div>
  <div>

We have used Bootstrap's button-dropdown component to create a SELECT TAG like experience. User can click the dropdown and choose any option and the same value is instantly shown inside button (accessible via Mouse as well as keyboard)

Step 1: Click on single line option value inside dropdown.

Step 2: Now click on some multiple lines option value inside dropdown.

Step 3: Now once again click on some single line option value inside dropdown.

Issue: After step 3 the dropdown list(i.e., ul) is not disappearing.

Expected Result: After step 3 the dropdown list(i.e., ul) should disappear on every selection of options(both on mouse click and keyboard usage).

Please ignore caret and design related minor bugs

I have updated my answer with the complete working code

Alon Eitan
– Alon Eitan

2015-10-27 15:50:05 +00:00
Commented Oct 27, 2015 at 15:50 — Alon Eitan
– Alon Eitan, Commented Oct 27, 2015 at 15:50

Alon Eitan · Accepted Answer · 2015-10-27 18:29:14Z

2

+50

Why won't you close the list manually?

Replace this line:

$(this).parents('.dropdown-menu').find('li').removeClass('active');

With this:

$(this).parents('.dropdown-menu').parent().removeClass('open').end().find('li').removeClass('active');

This would be the end code:

$('.btn-group').on('focus', '.dropdown-menu li', function() {
    $(this).siblings('.active').removeClass('active').end().addClass('active');

   //Displays selected text on dropdown-toggle button
   $(this).closest(":has(button)").find('button').html('<div class="dropDownSelected">' + $(this).children('a').html() + '</div>' + '<span class="caret" style="float:right;"></span>');
}).on('click mouseup', '.dropdown-menu li a', function() {
   $(this).parents('.dropdown-menu').parent().removeClass('open');
});

.btn-group,
.dropdown-menu {
  max-width: 150px;
}
.dropdown-menu li a {
  white-space: normal!important;
  ;
}
.dropDownSelected {
  white-space: normal;
  margin-right: 22px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Action <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a>
      </li>
      <li><a href="#">Another action</a>
      </li>
      <li><a href="#">Something else here</a>
      </li>
      <li><a href="#">Separated link which is of two lines or more</a>
      </li>
    </ul>
  </div>
  <div>

edited Oct 27, 2015 at 18:29

answered Oct 25, 2015 at 23:54

Alon Eitan

12k8 gold badges51 silver badges61 bronze badges

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

4 Comments

Deepak Yadav Over a year ago

now it doesn't works with keyboard navigation! try accessing this via keyboard arrow keys. - or check mine one from question

Alon Eitan Over a year ago

@DeepakYadav - I changed the event from focus to click and I think it works. Please try again

Deepak Yadav Over a year ago

:-D but, when you access it via keyboard, you'll notice that, the text inside button tag doesn't changes in real-time as you focus/move over the dropdown list. Check my question example.

Alon Eitan Over a year ago

@DeepakYadav - Added one more change. finger crossed :)

Andre Felipe · Accepted Answer · 2015-10-23 15:43:24Z

0

Just alter the JS to either remove or hide the DOM.

For example:

$('.btn-group').on('focus', '.dropdown-menu li a', function() {

  $(this).parents('.dropdown-menu').find('li').removeClass('active');
  $(this).parent('li').addClass('active');


  //Displays selected text on dropdown-toggle button
  $(this).closest(":has(button)").find('button').html('<div class="dropDownSelected">' + $(this).html() + '</div>' + '<span class="caret" style="float:right;"></span>');
  
 $('.dropdown-menu').hide()


});

.btn-group,
.dropdown-menu {
  max-width: 150px;
}
.dropdown-menu li a {
  white-space: normal!important;
  ;
}
.dropDownSelected {
  white-space: normal;
  margin-right: 22px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Action <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a>
      </li>
      <li><a href="#">Another action</a>
      </li>
      <li><a href="#">Something else here</a>
      </li>
      <li><a href="#">Separated link which is of two lines or more</a>
      </li>
    </ul>
  </div>
  <div>

Now if you run it, it's not a dropdown anymore. Then just style the button you created the way you want.

answered Oct 23, 2015 at 15:43

Andre Felipe

571 silver badge9 bronze badges

6 Comments

Deepak Yadav Over a year ago

it doesn't opens the dropdown next time

Andre Felipe Over a year ago

@DeepakYadav isn't that the point? You said you don't want the ul

Deepak Yadav Over a year ago

Check my example once again, as explained in STEPS. My user should be able to Click on button --> Choose an value from dropdown(like select tag) --> Dropdown should collapse after Value selection --> And should work again (shouldn't stop)

Andre Felipe Over a year ago

@DeepakYadav ioh i see. in that case, you have to put the dropdown-toggle in the <ul>

Andre Felipe Over a year ago

@DeepakYadav Why not just use a <select> tag for all this?

|

Collectives™ on Stack Overflow

Custom Select tag like behaviour using bootstrap button and dropdown element

2 Answers 2

4 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related