Question

我有一个链接，当点击时，会出现一个多选项，如果再次单击它，下拉菜单会淡出。如果用户选择了值然后单击以删除大小，我希望取消选择所有内容，而无需用户手动取消选择每个项目。

<a href="" id="add_colour">Add colour</a>  
<a href="" id="add_size">Add size</a>

<div class="form-group" id="size">
   <select multiple data-title="Select sizes" multiple name="size[]" class="selectpicker size" data-style="btn-block">
      <option value="xs">x-small</option>
      <option value="s">small</option>
      <option value="m">Medium</option>
      <option value="l">large</option>
      <option value="xl">x-larg</option>
      <option value="2xl">xx-large</option>
   </select>
</div>


$("#add_size").on("click", function(e) {
    e.preventDefault();


    if ($("#size").is(":visible")) {
        $(".size option:selected").prop("selected", false);
        $("#size").fadeOut();
        $(this).html("Add Sizes");

    } else {
        $("#size").fadeIn();
        $(this).html("Remove size");
    }
});

这不起作用，但也不会在控制台中产生任何错误。

Answer 1

您可以设置值rto默认值并刷新选择，如：

$("#add_size").on("click", function(e) {
  e.preventDefault();

  if ($("#size").is(":visible")) 
  {
    //Set the value to default
    $(".size").val('default_value');

    //Refresh the selectpicker
    $(".size").selectpicker("refresh");


    $("#size").fadeOut();
    $(this).html("Add Sizes");

  } else {
    $("#size").fadeIn();
    $(this).html("Remove size");
  }
});

注意：如果没有“defaul_value”，您可以将其留空，如：

$(".size").val('').selectpicker("refresh");

希望这有帮助。

Answer 2

你可以给所有这些选择一个特定的类，然后使用它来获得你想要的所有这些选择，并将它们的值设置为0

示例

$(".selectClass").each(function() {
  $( this ).val("");
  // if this didn't work, usually it does
  $(this).removeProp("selected");

});

在切换后单击链接，从多选中取消选择所有选定的值

2 个答案: