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

Posted 2023-05-08

【中文标题】在 Bootstrap 选择器上使用 jQuery 取消选择选项

【英文标题】：Unselect an option using jQuery on a Bootstrap selectpicker

【发布时间】：2014-05-01 15:22:52

【问题描述】：

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

这是我将所选选项呈现到屏幕上的代码，这样每个选项旁边都会显示一个“X”，当单击它时，所选项目会从屏幕中删除：

//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重新渲染。有什么想法我可以做到这一点吗？

HTML 非常简单：

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

【参考方案1】：

这是一个使用deselectAll() 方法的工作示例。

引导层：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);

【讨论】：

您好，谢谢您，但不是取消选择该选项，而是将其从 bootply 示例的选项列表中删除。我该如何解决？

谢谢，您的代码在 bootply 上似乎运行良好，但它似乎对我没有任何作用，我会接受您的回答并尝试在我的最后进行调试。谢谢

原来我的问题是，我的下拉菜单没有生成选项值，所以它不能被删除，添加了，瞧，成功了。谢谢小猪

【参考方案2】：

我从下面的代码中得到了解决方案。试试吧

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

【参考方案3】：

因为下面的代码适用于普通的选择框

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

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

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

【参考方案4】：

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

将选择变成一个'多个'选择列表并将'data-max-options'设置为1。例如：

               <select class="selectpicker" title="Select..." multiple data-max-options="1">
                                <option>Hello Title 1</option>
                                <option>Hello Title 2</option>
                                <option>Hello Title 3</option>
               </select>