Custom tag type, for example, behavior, using the boot button and dropdown

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 used the Bootstrap component for the drop-down list to create a similar SELECT TAG experience. The user can click the drop-down menu and select any option, and the same value is displayed inside the button (accessible with the mouse and keyboard).

Step 1: Select the value of a single line inside the drop-down list.

Step 2: Now click on a few line parameter values ​​inside the drop-down list.

Step 3: Now again select the value of a single line inside the drop-down list.

Problem: after step 3, the drop-down list (i.e. ul) does not disappear.

Expected result: after step 3, the drop-down list (i.e. ul) should disappear with each choice of parameters (both when using the mouse and when using the keyboard).

Please ignore minor carriage and design errors.

Answer 1

Why don't you close the list manually?

Replace this line:

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

Wherein:

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

This will be the final 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> 

Answer 2

Just change the JS to remove or hide the DOM.

For instance:

 $('.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, this is not a drop-down list. Then just create the button that you created the way you want.