Как переключить выбор опции в мультивыборе с помощью jQuery?
У меня есть стандарт select multiple Поле ввода HTML, например:
<select multiple="multiple" size="5" id="mysel" name="countries">
<option value="2">Afghanistan</option>
<option value="4">Aland</option>
</select>
Поскольку это - мультивыбор, для выбора больше чем одного значения, необходимо держать клавишу CTRL и выбрать дальнейшие элементы. Однако то, чего я хочу достигнуть, что:
- Нажатие на опцию UNSELECTED ВЫБИРАЕТ его
- Нажатие на опцию SELECTED ОТМЕНЯЕТ ВЫБОР его.
Идея состоит в том, чтобы избежать необходимости нажимать клавишу CTRL и изменять семантику использования этого поля ввода. Элементы должны только можно выбрать и должны не можно выбрать путем нажатия (т.е. переключения избранного состояния).
Я еще не смог реализовать это. Псевдокод должен выглядеть примерно так.
- Поймайте событие Click.
- Проверьте, был ли элемент, который был нажат, отменен выбор, затем выберите его
- Или если элемент, который был нажат, был выбран, затем отмените выбор его.
Как я должен реализовать это?
2 ответа
Вы можете использовать следующий фрагмент для достижения желаемого эффекта
$("select[multiple] option").mousedown(function(){
var $self = $(this);
if ($self.prop("selected"))
$self.prop("selected", false);
else
$self.prop("selected", true);
return false;
});
в более старых версиях jQuery, где () был недоступен:
$("select[multiple] option").mousedown(function(){
var $self = $(this);
if ($self.attr("selected"))
$self.attr("selected", "");
else
$self.attr("selected", "selected");
return false;
});
Вы правы в желании изменить поведение по умолчанию выберите несколько полей ввода. Они имеют тенденцию внести негативно к пользовательскому опыту, поскольку цель не четко передается, и пользователи могут не понять, как их использовать правильно.
Повторно целенаправляйте в поле «Многофункциональный выбор» не прав. Если вы рассматриваете, что используете Select Memble, то вы можете ревертировать ваш дизайн. Возможно, вы можете использовать флажки вместо этого?
Вот статья по теме: http://www.ryancramer.com/journal /entries/select_multiple/