Как избежать необходимости в ctrl-click в поле выбора с помощью Javascript?

Я думал, что это будет простой взлом, но я теперь ищу часы и не вижу, чтобы найти правильный поисковый запрос. Я хочу иметь обычный множественный блок выбора (<select multiple="multiple">), за исключением того, что я не хочу, чтобы пользователь удерживал клавишу управления, чтобы сделать несколько выборов.

Другими словами, я хочу, чтобы левый щелчок переключал элемент <option> под курсором, не меняя других. Другими словами, я хочу что-то похожее на поле списка комбо, но ведет себя как группа флажков.

Можно ли предложить простой способ сделать это в Javascript? Спасибо.

Ответ 1

Проверьте эту скрипту: http://jsfiddle.net/xQqbR/1022/

В основном вам нужно переопределить событие mousedown для каждого <option> и переключить свойство selected.

$('option').mousedown(function(e) {
    e.preventDefault();
    $(this).prop('selected', !$(this).prop('selected'));
    return false;
});

Для простоты я дал "option" в качестве селектора выше. Вы можете настроить его так, чтобы он соответствовал <option>s при определенных элементах <select>. Для ex: $('#mymultiselect option')

Ответ 2

Чтобы сама решить эту проблему и заметила прослушанное поведение, простой перехват mousedown и установка атрибута была бы, поэтому сделана переопределение элемента select и он работает хорошо.

jsFiddle: http://jsfiddle.net/51p7ocLw/

Примечание. Этот код исправляет ошибочное поведение, заменяя элемент select в DOM. Это немного агрессивно и разрушит обработчики событий, которые вы могли бы привязать к элементу.

window.onmousedown = function (e) {
    var el = e.target;
    if (el.tagName.toLowerCase() == 'option' && el.parentNode.hasAttribute('multiple')) {
        e.preventDefault();

        // toggle selection
        if (el.hasAttribute('selected')) el.removeAttribute('selected');
        else el.setAttribute('selected', '');

        // hack to correct buggy behavior
        var select = el.parentNode.cloneNode(true);
        el.parentNode.parentNode.replaceChild(select, el.parentNode);
    }
}

<h4>From</h4>

<div>
    <select name="sites-list" size="7" multiple>
        <option value="site-1">SITE</option>
        <option value="site-2" selected>SITE</option>
        <option value="site-3">SITE</option>
        <option value="site-4">SITE</option>
        <option value="site-5">SITE</option>
        <option value="site-6" selected>SITE</option>
        <option value="site-7">SITE</option>
        <option value="site-8">SITE</option>
        <option value="site-9">SITE</option>
    </select>
</div>

Ответ 3

Ответ Techfoobar глючит, он не выбирает все параметры, если вы перетаскиваете мышь.

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

Попробуйте этот ответ.

Примечание. Не работает в Firefox, но отлично работает в Safari/Chrome/Opera. (Я не тестировал его в IE)

Ответ 4

У меня была такая же проблема сегодня, как правило, советуют использовать список скрытых флажков и эмулировать поведение с помощью css, таким образом, проще управлять, но в моем случае я не хочу изменять html.

В настоящий момент я тестировал этот код только с помощью google chrome, я не знаю, работает ли он с другим браузером, но он должен:

var changed;
$('select[multiple="multiple"]').change(function(e) {
    var select = $(this);
    var list = select.data('prevstate');
    var val = select.val();
    if (list == null) {
        list = val;
    } else if (val.length == 1) {
        val = val.pop();
        var pos = list.indexOf(val);
        if (pos == -1)
            list.push(val);
        else
            list.splice(pos, 1);
    } else {
        list = val;
    }
    select.val(list);
    select.data('prevstate', list);
    changed = true;
}).find('option').click(function() {
    if (!changed){
        $(this).parent().change();
    }
    changed = false;
});

Конечно, предложения приветствуются, но я не нашел другого способа