Выбор и отмена выбора нескольких параметров из списка без клавиатуры - PullRequest
Новая
       12

Выбор и отмена выбора нескольких параметров из списка без клавиатуры

0 голосов
/ 22 ноября 2011

У меня есть следующий список, который представлен пользователю 

<select id="regions" multiple="multiple">
  <option value='us-west' selected="selected">US West Coast</option>
  <option value='us-east' selected="selected">US East Coast</option>
  <option value='eur' selected="selected">Europe</option>
  <option value='asia' selected="selected">Asia</option>
</select>

Как показано выше, все элементы выбраны.

Я пытался реализовать функцию jquery, где, если пользовательЕсли щелкнуть параметр в списке, будет удален только выбранный элемент (скажем, Европа), а остальные параметры будут выбраны.Я знаю, что это возможно, удерживая нажатой клавишу «CTRL» и щелкая, но есть ли способ, которым все, что пользователь должен сделать, - это щелкнуть?

Ответы [ 3 ]

1 голос
/ 22 ноября 2011

Так что это заняло у меня некоторое время, но я думаю, что у меня есть функциональность, которую вы ищете.

Проверьте эту скрипку

Идея состоит в том, чтобы создатьмассив для отслеживания того, что выбрано.Обычное поведение поля множественного выбора, если вы только щелкаете, состоит в том, чтобы отменить выбор всех других вариантов выбора и выбрать то, на что вы нажали.

Поэтому, вместо того, чтобы интересоваться тем, что находится в окне выбора, мы видим, какая опция нажата (в mousedown) и добавляем ее в наш личный список того, что выбрано, затем обновляем поле выбора, чтобы отразить то, что вlist (при наведении мыши).

Это предотвращает перетаскивание пользователем элемента для выбора нескольких элементов в окне выбора, но, возможно, это может привести к путанице.

var selection = [];

$('#the_box > option').mousedown(function(){

    if(selection.length < 1){
        selection.push($(this).val());
    } else {
        var found = 0;
        for(i = 0; i < selection.length; i++) {
            if(selection[i] == $(this).val()){
                selection.splice(i, 1);
                found = 1;
                break;
            }
        }
        if(found === 0){
            selection.push($(this).val());
        }
    }
});

$('#the_box').bind('mouseup mouseout', function(){
    $(this).children('option').each(function(){
        $(this).removeAttr('selected');
    });
    $(this).children('option').each(function(){
        for(i = 0; i < selection.length; i++){
            if($(this).val() == selection[i]){
                $(this).attr('selected','selected');
            }
        }
    });
});

Однако вы могли бы сделать это точно с помощью списка или набора элементов div вместо использования собственных тегов <select>, что на самом деле было бы проще, если бы вы использовали этометод (из-за того, что не нужно обходить поведение по умолчанию для окна выбора): P

0 голосов
/ 05 марта 2013

Это ни в коем случае не идеальное решение, но вы можете попробовать его.

Чтобы прикрепить функцию (обратите внимание, что это позволяет вызывать функцию обратного вызова после выбора элементов ... например, если вы хотите заполнить другой список на основе выбора) 

$('#mySelect').click(function () {
    singleClickList(this, myCallbackFunction);
});

Функция: 

function singleClickList(mythis, callback) {
    var selected = $(mythis).data('selected');
    if (selected == undefined) selected = [];
    var scrollTop = mythis.scrollTop;
    var current = $(mythis).val();
    var index;
    if (current != null) {
        if (current.length > 0) {
            index = $.inArray(current[0], selected);
            if (index >= 0)
                selected.splice(index, 1);
            else
                selected.push(current[0]);
        }
        $(mythis).val(selected);
        $(mythis).data('selected', selected);
        mythis.scrollTop = scrollTop;
        if (callback) callback();
    }
}

Обратите внимание, что для этого требуется jquery, и для хранения массива выбранных элементов используется метод jquery .data.

0 голосов
/ 22 ноября 2011

Вы можете использовать: 

$('option').click(function(){
    $(this).removeAttr('selected', 'selected')
    .siblings().attr('selected', 'selected');
});

То, что делает эта функция, состоит в том, чтобы удалить текущее состояние выбора элемента, по которому щелкнули, но повторно выбрать весь набор братьев и сестер .

Смотрите это скрипка .

Обновление: Поскольку с помощью клавиатуры мы можем послать другой сигнал (другой флаг) в элемент управления, нам все равно нужно каким-то образом смоделировать его с помощью мыши. Например, мы можем предположить, что щелчок правой кнопкой мыши подобен нажатию Ctrl + щелчок, а щелчок левой кнопкой мыши - просто щелчок. Тем не менее, щелчок правой кнопкой мыши не является хорошим шаблоном в сети и не так распространен.

Другим вариантом может быть переопределение нашего бизнеса, чтобы заставить элемент управления вести себя по-другому (например, при щелчке мыши, если объект уже выделен, затем отмените его выбор, а если он не выбран, добавьте его во всю коллекцию выбранных опции). Но недостатком этого подхода является то, что пользователи теряются при использовании вашего элемента управления, поскольку он далеко отходит от обычных элементов управления HTML, с которыми они ежедневно взаимодействуют. Другими словами, изменение поведения элемента управления не является хорошим решением в отношении UX.

...