我用过bootstrap select
现在,当我点击一个选项它应该被选中,因为它工作正常,但当我点击相同的选项时,它应该取消选择与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>
我自己找到了解决方案,您现在可以选择并取消选择键盘以及使用箭头选择只需按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>
我已经更新了你的代码,它对我来说很好。请检查。
<select id="cus" class="selectpicker" multiple>
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
$('#cus').selectpicker({
liveSearch: true,
showTick:true
});
选择中没有错误。
下面是一个代码,它将选中的值作为数组返回$(“#cus”)。val()
谢谢。