单击 select 和 select 的单个下拉菜单，如 bootstrap-select 中的多个

Question

我用过bootstrapselect

现在，当我点击一个选项时，它应该被select编辑，因为它工作正常，但是当我点击同一个选项时，它应该被select编辑click 和 Enter 按键事件如何处理多个 select 我只想对单个 select.

使用相同的方式

我已经尝试了以下代码 select 和 deselect 点击事件它工作正常但是当我试图用键盘 enter key 它甚至没有得到selected.

感谢任何帮助:-)

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

我自己找到了解决方案，您现在也可以 select 和 deselect 使用键盘 select 使用箭头只需按 enter 进入 select 数据，如果您想要 deselect 只需在下拉框中按 enter 它将 deselect 数据

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

Answer 2

我已经更新了您的代码，它对我来说工作正常。请检查。

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

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

选择没有错误

下面的代码将 return 选择的值作为数组 $("#cus").val()

谢谢。

单击 select 和 select 的单个下拉菜单，如 bootstrap-select 中的多个

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

html

jquery

twitter-bootstrap

bootstrap-select

bootstrap-selectpicker