Выбранный множественный выбор - Отменить выбор всего при выборе чего-либо еще, и наоборот

Я использую Выбранный множественный выбор с параметром "Все".

Ссылаясь на это

В основном то, что я хочу сделать, это следующее:

  1. Если пользователь выбирает любой вариант, кроме "Все", я хочу, чтобы "Все" автоматически отменялось - работает, используя это:

    if ($('#customTextFilterSelect option[value="ALL"]').attr('selected') == 'selected' 
        && $("#customTextFilterSelect option:selected").length > 1) {
    $('#customTextFilterSelect option[value="ALL"]').removeAttr("selected");
}

  2. Я также хочу, чтобы работало наоборот: если пользователь выбирает «Все», я хочу, чтобы другие параметры автоматически отменялись. не знаю, как лучше реализовать

  3. И, наконец, если пользователь отменяет выбор всего (вручную, нажав «x»), «Все» должно быть выбрано автоматически. вроде работает, но заполнитель возвращается, когда выбрано «Все», как если бы длина == 0

    if ($("#customTextFilterSelect option:selected").length == 0) {
    $('#customTextFilterSelect option[value="ALL"]').attr('selected', 'selected');
}

javascript jquery jquery-chosen
person Gady    schedule 19.01.2013    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вот решение:

$(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.

person Onur Yıldırım    schedule 19.01.2013
comment
Выбрано в качестве ответа из-за комментариев и информации-заполнителя. - person Gady; 22.01.2013

arrow_upward
2
arrow_downward

Для этого используйте следующий javascript.

$(function () {
    //Defining the 'ALL' as default option.
    var prevdata = ["ALL"];
    $('.chzn-select').chosen().change(function(e) {

        if ($(this).find("option:selected").length === 0) {
            $(this).find("option[value='ALL']").attr('selected', 'selected');
        } else {
            var cur_date = $(this).val();

            if ($(this).find("option[value='ALL']").attr("selected") == "selected" && $(this).find("option:selected").length > 1)
                $(this).find("option[value='ALL']").removeAttr("selected");

            if(( $.inArray('ALL', prevdata) == -1) && $.inArray('ALL', cur_date) > -1){

               $(this).find('option').removeAttr('selected');
                $(this).find("option[value='ALL']").attr("selected", "selected");
               }
        }
        $('.chzn-select').trigger("liszt:updated");

        //Storing the current processed value 
        prevdata = $('#customTextFilterSelect').val();
    });

});

Ниже приведена ссылка jsFiddle

http://jsfiddle.net/qCzK9/7/

person Ashwin Preetham Lobo    schedule 19.01.2013