通过单击链接后点击链接取消选择多选中的所有选定值

问题描述：

我有一个链接，单击时会出现多选，如果再次单击它，下拉菜单将淡出。如果用户选择了值，然后点击删除尺寸，我希望所有内容都被取消选择，而用户不必手动取消选择每个项目。通过单击链接后点击链接取消选择多选中的所有选定值

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

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

答

您可以设置值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");

希望这会有所帮助。

答

你可以给所有的这些选择某一类，然后用它来得到你想要的所有的这些选择，并将其值设置为0

例如

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

});

通过单击链接后点击链接取消选择多选中的所有选定值

相关推荐