Question

我正在使用Bootstrap来处理一些UI元素：SelectPicker允许用户选择多个选项并将其呈现在段落标记中的屏幕上。他们还应该能够删除选定的选项。

这是我将所选选项呈现在屏幕上的代码，因此每个选项都会显示一个＆＃39; X＆＃39;在它旁边，当它被点击时，所选项目将从屏幕上删除：

//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');
});

所以问题是＆＃39;删除＆＃39;的后半部分。代码，当项目确实从输出显示中删除时，它仍然在选择选择器中被选中，因此当选择另一个项目时，＆＃39;删除＆＃39;项目被重新渲染。我有什么想法可以做到这一点吗？

HTML非常简单：

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

Answer 1

我从以下代码中获得了解决方案。试一试

$("#listID").val('').trigger('change');

Answer 2

以下是使用deselectAll()方法的工作示例。

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
  });

更新：

更改

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

通过

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

Answer 3

由于以下代码适用于普通选择框

$('#myselect option').prop("selected", false);

我尝试使用UWU_SANDUN的答案下面的代码，它也很好用

$('#myselect option').prop("selected", false).trigger('change');

Answer 4

无需使用JQuery。假设用户正在使用bootstrap-select ... https://developer.snapappointments.com/bootstrap-select/

将选择内容添加到“多个”选择列表中，并将“ data-max-options”设置为1。例如：

xyz-pipelines.yml

在Bootstrap选择器上使用jQuery取消选择一个选项

4 个答案: