这是解决方案:
$(function()
{
var cSelect = $('.chzn-select').chosen();
var allItem = cSelect.find("option[value='ALL']"); //reference to the "ALL" option
var rest = cSelect.find("option[value!='ALL']"); //reference for the rest of the options
var allItemAlreadySelected = true; //set a flag for the "ALL" option's previous state
cSelect.change(function(event)
{
if ($(this).find("option:selected").length == 0) //if no selection
{
allItem.prop('selected', true); //select "ALL" option
}
else
{
if (allItem.is(':selected')) //currently "ALL" option is selected, but:
{
if (allItemAlreadySelected == false) //if previously not selected
{
rest.prop('selected', false); //deselect rest
allItem.prop('selected', true); //select "ALL" option
}
else //if "ALL" option is previously selected (already), it means we have selected smthelse
allItem.prop('selected', false); //so deselect "ALL" option
}
}
allItemAlreadySelected = allItem.is(':selected'); //update the flag
$('.chzn-select').trigger("liszt:updated"); //update the control
});
});
现在,您根本不需要那个占位符。控件现在永远不会为空。因此,要摆脱占位符,您所要做的就是;将此属性添加到您的select
.
data-placeholder=" "
它的值应该有一个空格,否则选择可能会覆盖它。
<select data-placeholder=" " id="customTextFilterSelect" multiple='multiple' style="width:350px;" class="chzn-select">
这是jsFiddle 上的工作代码。