click for select and deselect of single drop down like multiple in bootstrap-select

Question

I have used bootstrap select

Now, when I click on an option it should be selected as it is working fine, but when I click on the same option it should be deselected with both click and Enter keypress event how it is working on multiple select I just want the same way for single select.

I have tried the following code to select and deselect on click event it's working fine but when I am trying to do it with the keyboard enter key it's not even getting selected.

Any help appreciated :-)

$('.selectpicker').selectpicker({
    liveSearch:true,
    showTick:true
});

$(document).on('click', '.dropdown-menu li', function(event){ 
    if($(this).hasClass('active')){
 $(this).parent().prev('div').parent().next('select').selectpicker('val',''); } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css" rel="stylesheet"/>

<select class="selectpicker">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>

Answer 1

I found solution by myself, you can now select and deselect with keyboard as well select using arrow just press enter to select data and if you want to deselect just press enter on the dropdown box it will deselect the data

$('.selectpicker').selectpicker({
    liveSearch:true,
    showTick:true
});

$(document).on('click', '.dropdown-menu li', function(event){
    if($(this).hasClass('active')){
  $(this).parent().prev('div').parent().next('select').selectpicker('val',''); } 
});

$(document).bind("keyup",".dropdown-menu li", function(e){
    var activeIndex = $(".dropdown-menu li.active").data('original-index');
    var selectedIndex = $(".dropdown-menu li.selected").data('original-index');
    if(e.which == 13){
       if(selectedIndex == activeIndex){
          $(".dropdown-menu li.active").find("a").trigger('click');
       
       } else {
          $(".dropdown-menu li.active").removeClass('active').find("a").trigger('click'); 
       }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css" rel="stylesheet"/>

<select class="selectpicker">
    <option value='1'>Mustard</option>
    <option value='2'>Ketchup</option>
    <option value='3'>Relish</option>
</select>