在Bootstrap selectpicker上使用jQuery取消选择一个选项 [英] Unselect an option using jQuery on a Bootstrap selectpicker

问题描述

我为一些UI元素使用Bootstrap：SelectPicker，它允许用户选择多个选项并将其呈现在段落标签中的屏幕上。他们也应该能够删除选定的选项。

这是我的代码，用于将选定的选项渲染到屏幕上，以便每个选项在其旁边都显示一个X，点击时删除选定的项目从屏幕：

  //将所选项目渲染到屏幕
 
 $（'＃dataCombo' ）.change（function（）{
 $（'＃dataOutput'）。html（''）; 
 var values = $（'＃dataCombo'）。val（）; 
 for （var i = 0; i  $（'＃dataOutput'）。append（< p class ='removeable'>+ values [i] +x< / p>）
}}）; 
 
 //单击'X'时，删除该项目
 
 $（＃dataOutput）。on（'click'，'。removeable'，function（ ）{
 $（this）.remove（）; //这个项目从屏幕上移除
 //接下来我需要从dataCombo中取消选择selectpicker 
 var foo = $（this） ; 
 $（'＃dataCombo'）。find（'[value = foo]'）。remove（）; 
 console.log（foo）; 
'（'dataCombo'）。 selectpicker（'refresh'）; 
}）; 
  

所以问题在于'remove'代码的后半部分，输出显示，它仍然在选择选择器中被选中，所以当选择另一个项目时 - 去除项目被重新渲染。任何想法，我可以做到这一点？

HTML很简单：

 < H6>组合框< / H6> 
< select id =dataComboclass =selectpickermultiple> 
< / select> 
  

解决方案

这是一个使用 deselectAll（）方法。

$ b Bootply ： http://www.bootply.com/124259

JS ：

  //将所选项目渲染到屏幕
 
 $（'＃dataCombo'）。change（function （）{
 $（'＃dataOutput'）。html（''）; 
 var values = $（'＃dataCombo'）。val（）; 
 for（var i = 0 ; i< values.length; i + = 1）{
 $（'＃dataOutput'）。append（< p class ='removeable'>< span class ='reel'> + values [i] +< / span> x< / p>）
}}）; 
 
 //单击'X'时，删除该项目
 
 $（＃dataOutput）。on（'click'，'。removeable'，function（ ）{
 $（this）.remove（）; //这个项目从屏幕上移除
 //接下来我需要从dataCombo中取消选择selectpicker 
 var foo = $（this） ; 
 $（'＃dataCombo'）。find（'[value ='+ foo.find（'。reel'）。html（）+']'）。remove（）; 
 // $（'＃dataCombo'）。val（）; 
 $ values = $（'＃dataCombo'）。val（）; 
 $（'＃dataCombo'）。selectpicker（'deselectAll'）; 
 $（'＃dataCombo'）。selectpicker（'val'，$ values）; 
 $（'＃dataCombo'）。selectpicker（'refresh'）; 
}）; 
 
 $（＃dataCombo）。selectpicker（{
 multiple：true 
}）; 
  

更新：

更改

  $（'＃dataCombo'）。find（'[value ='+ foo.find（'。 。卷轴 '）的html（）+']）中删除（）; 
  

by

 <$ （'＃dataCombo'）。find（'[value ='+ foo.find（'。reel'）。html（）+']'）。prop（'selected'，false）; 
  

I am using Bootstrap for some UI elements: SelectPicker which allows a user to select multiple options and have it rendered to the screen in paragraph tags. They should also be able to remove a selected option.

This is my code to render the selected options onto the screen, so that each option appears with an 'X' next to it, when it's clicked the selected item is removed from the screen:

//Render selected item to the screen

$('#dataCombo').change(function(){
$('#dataOutput').html('');
var values = $('#dataCombo').val();
for(var i = 0; i < values.length; i += 1) {
$('#dataOutput').append("<p class='removeable'>" + values[i] + " x </p>")
}});

//When the 'X' is clicked, remove that item

$("#dataOutput").on('click','.removeable',function(){
$(this).remove(); //this removes the item from the screen
//Next i need to unselect it from dataCombo selectpicker
var foo = $(this);
$('#dataCombo').find('[value=foo]').remove();
console.log(foo);
$('dataCombo').selectpicker('refresh');
});   

So the problem is the second half of the 'remove' code, while the item does get removed from the output display, it is still selected in the select picker, so when another item is selected - the 'removed' item is re-rendered. Any ideas how i can do this?

The HTML is pretty simple:

<h6>ComboBox</h6>
<select id="dataCombo"  class="selectpicker" multiple>
</select>

解决方案

Here is a working exemple using deselectAll() method.

Bootply : http://www.bootply.com/124259

JS :

//Render selected item to the screen

$('#dataCombo').change(function(){
$('#dataOutput').html('');
var values = $('#dataCombo').val();
for(var i = 0; i < values.length; i += 1) {
$('#dataOutput').append("<p class='removeable'><span class='reel'>" + values[i] + "</span> x </p>")
}});

//When the 'X' is clicked, remove that item

$("#dataOutput").on('click','.removeable',function(){
$(this).remove(); //this removes the item from the screen
//Next i need to unselect it from dataCombo selectpicker
var foo = $(this);
$('#dataCombo').find('[value='+foo.find('.reel').html()+']').remove();
 //  $('#dataCombo').val(  );
$values = $('#dataCombo').val();
$('#dataCombo').selectpicker('deselectAll');
$('#dataCombo').selectpicker('val', $values );
$('#dataCombo').selectpicker('refresh');
});

  $("#dataCombo").selectpicker({
    multiple:true
  });

UPDATE :

Change

$('#dataCombo').find('[value='+foo.find('.reel').html()+']').remove();

by

$('#dataCombo').find('[value='+foo.find('.reel').html()+']').prop('selected', false);

这篇关于在Bootstrap selectpicker上使用jQuery取消选择一个选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！