单击以选择和取消选择单个下拉列表，例如引导选择中的多个答案

【问题标题】：click for select and deselect of single drop down like multiple in bootstrap-select单击以选择和取消选择单个下拉列表，例如引导选择中的多个
【发布时间】：2018-06-07 05:07:21
【问题描述】：

我用过引导选择

现在，当我单击一个选项时，它应该被选中，因为它工作正常，但是当我单击同一个选项时，它应该被 click 和 Enter 按键事件取消选择它是如何在多个选择我只希望以相同的方式进行单选。

我已尝试使用以下代码在单击事件上选择和取消选择它工作正常，但是当我尝试使用键盘enter key 时它甚至没有被选中。

任何帮助表示赞赏:-)

$('.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>

【问题讨论】：

不！这是不可能的，你不能取消选择一个选项，你知道，它只适用于multiple 版本，那为什么呢？让我们考虑一下普通选择选项，如果您选择一个选项，它会得到blue 背景，对吗？现在再次点击！蓝色背景不会删除。同样在这里，当您选择另一个选项时，取消选中前一个选项，就像正常的选择选项一样。这是一个逻辑！实际上你不应该在单一版本中使用showTick:true。
实际上我为此进行了编码并且它正在工作，但是只需单击按钮，现在客户要求也可以在输入键时更改它
看到我已经更新了我的代码，现在它正在处理鼠标点击事件，但是当我尝试用enter 按键做同样的事情时它不起作用，因为我在箭头键事件上获得了活动类我也尝试过selected 类，但它不起作用。
所以问题变了。但是很好的尝试，我也在研究这个逻辑。让我根据enter按钮准备我的答案
你的意思是，你想用箭头键移动选项，用回车键选择/取消选择选项？

标签： jquery html twitter-bootstrap bootstrap-select bootstrap-selectpicker

【解决方案1】：

我已经更新了您的代码，它对我来说运行良好。请检查。

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

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

选择没有错误。

下面是一个将所选值作为数组返回的代码 $("#cus").val()

谢谢。

【讨论】：

我已经提到我需要相同的东西来单选而不是多选
从选择标签中删除多个。
那么它不会取消选择单击所选选项的问题
但在我的代码中，它运行良好，伙计。我们可以使用回车键选择选项，如果你想通过空格键删除选项 liveSearch。
您可以在可共享的地方提供您的代码，以便我们可以在那里修改您的代码。

【解决方案2】：

我自己找到了解决方案，您现在可以使用键盘进行选择和取消选择，也可以使用箭头进行选择，只需按 Enter 即可选择数据，如果您想取消选择，只需在下拉框中按 Enter 即可取消选择数据

$('.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>

【讨论】：