5

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>
Prateik Darji
  • 2,297
  • 1
  • 13
  • 29
  • No! it's not possible, *You can't unselect an option* as you know, it just work on `multiple` version, So why? let's think about normal select option, if you select a option, it get `blue` background right? now click again! blue background won't remove. Same here, when you select another option, that uncheck previous one, exactly like normal select option. It's a logic! Actually you should not use `showTick:true` in single version. – Pedram Dec 26 '17 at 10:37
  • actually i coded for that and it was working but on just button click, now client requirement is to change that on enter key press also – Prateik Darji Dec 26 '17 at 10:50
  • 1
    see I have updated my code now it's working on mouse click event but when I try to do the same thing with `enter` key press it's not working because of li get the active class on arrow key event and also I have tried on `selected` class but it's not working. – Prateik Darji Dec 26 '17 at 10:55
  • So the question changed.. But nice try, I'm worked on this logic too.. let me prepare my answer according `enter` button – Pedram Dec 26 '17 at 10:59
  • i just tried to put my efforts so it can be done in right way. – Prateik Darji Dec 26 '17 at 10:59
  • Check the answer below, now works with enter key – Pedram Dec 26 '17 at 11:01
  • 1
    You mean, you want move options with arrow key, and select/unselect options by enter key? – Pedram Dec 26 '17 at 11:04
  • yes, I want exactly what you are saying I need to select/deselect options using the keyboard as well. – Prateik Darji Dec 26 '17 at 11:07
  • I think this is, what author of this plugin should do. Not easy to do this at this moment, need more time, coding.. So better suggest this idea to author on github. – Pedram Dec 26 '17 at 11:09
  • yeah, sure I will do that, need to find some way for now :-( – Prateik Darji Dec 26 '17 at 11:10
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/161974/discussion-between-prateik-darji-and-mr-x). – Prateik Darji Dec 26 '17 at 11:27

2 Answers2

2

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>
Prateik Darji
  • 2,297
  • 1
  • 13
  • 29
1

I had updated your code it is working fine for me. please check.

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

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

there is no error in selection.

Below is a code which will return selected value as an array $("#cus").val()

Thank you.

Negi Rox
  • 3,828
  • 1
  • 11
  • 18
  • i have already mentioned that i need the same thing for single selection not multiple – Prateik Darji Dec 27 '17 at 13:11
  • remove multiple from select tag. – Negi Rox Dec 27 '17 at 13:15
  • then it will not deselect the on click of selected option that is the issue – Prateik Darji Dec 27 '17 at 13:18
  • but in my code, it is working fine dude. we can select option using enter key, if you want it by space key just remove option liveSearch. – Negi Rox Dec 27 '17 at 13:40
  • you can give your code in a shareable place so we can modify your code there. – Negi Rox Dec 27 '17 at 13:42
  • bro, please check my question I am not asking for selecting by the enter key, on the first click it should be selected and on the second click it should be deselected for single selection and I have already shared my code in the snippet – Prateik Darji Dec 28 '17 at 07:08
  • got your point. in this case, we need to change in bootstrap-select.js. litle tricky but we can do this. by modifying "this.$menuInner" function also you can see that logic for multi-select we need to apply same logic find this line // Don't close on multi choice menu if (that.multiple && that.options.maxOptions !== 1) { e.stopPropagation(); }. e.stopPropagation(); is a reason that it is not closing on multiselect just need to modify for single selection. – Negi Rox Dec 28 '17 at 07:49
  • changes in `bootstrap-select.js` will make changes in every selection box i need this functionality for some of the single selection that's why i have applied the logic which is displaying in my answer and its working great :-) – Prateik Darji Dec 28 '17 at 09:11