У меня есть выпадающее меню, которое позволяет выбрать несколько вариантов. Теперь я хочу сделать это, когда один конкретный параметр выбрал все остальные для отключения и включения для выбора. Если этот конкретный элемент не выбран, все остальные должны быть снова включены.
Это мой раскрывающийся список выбора:
<select class = "input-fields selectpicker" id = "select_heigh" name = "search[]" multiple>
<option value = "all" selected>Search all</option>
<option value = "tag">Tags</option>
<option value = "username">Username</option>
<option value = "email">Email</option>
<option value = "full_name">Full Name</option>
</select>
И вот что я пробовал для js
$(document).ready(function() {
$('.selectpicker').selectpicker();
$('.selectpicker').on('change', function() {
if ($('option[value = "all"]', this).is(':selected') && $(this).val().length > 1) {
$('option[value = "all"]', this).prop('selected', false);
$('.selectpicker').selectpicker('refresh');
}
var selected = $(this).val();
if (selected.includes("tag")) {
$('option[value! = "tag"]', this).prop('disabled', true);
} else {
$('option[value! = "tag"]', this).prop('disabled', false);
}
if (selected.length > 3) {
$(this).selectpicker('setStyle', 'selected-count', 'btn-danger');
$(this).selectpicker('setTitle', selected.length + ' select(s)');
} else {
$(this).selectpicker('setStyle', 'selected-count', 'btn-default');
$(this).selectpicker('setTitle', 'Select');
}
});
});
Я хочу, чтобы при выборе «Тег» другие параметры были отключены. Когда «Тег» не выбран, другие активируются. Когда выбран любой другой параметр, он не влияет на других.
Кроме того, подсчет выбранных вариантов не работает должным образом. Он должен начать показывать Selected(3), Selected(4)... после третьего выбора. В настоящее время он показывает все из них, а не в счет.
Я не очень хорошо знаком с JS и не уверен, что я на правильном пути.
Спасибо, но я все еще не могу решить проблему.
Я в замешательстве. Если щелчок по одному параметру предназначен для «отключения» всех остальных, разве это не противоречит цели выбора «множественного»?
Я понимаю, что вы имеете в виду, но будет около 10 вариантов, и если этот параметр не выбран, нет проблем с выбором нескольких вариантов. Я просто показываю дополнительные фильтры, когда нажимается только этот параметр.
Это кажется запутанным пользовательским интерфейсом, я бы лично предложил использовать флажок <input>
, чтобы предложить выбор опции, которая отключает все остальные, и <select>
, чтобы удерживать все остальные варианты (хотя я лично выбрал бы флажки вместо множественного выбора ). Например: jsfiddle.net/davidThomas/s1w6L27x
Чего хочет добиться OP, так это довольно неожиданного поведения собственного элемента управления формой.
И в случае изменения поведения, оно должно быть основано на использовании того, какие элементы формы или элементы, в частности, поддерживают изначально, например отключено - и набора данных-свойство.
Тогда реализация может быть такой же простой, как запрос правильного элемента select и подписка прослушивателя событий на любое событие щелчка , которое происходит на самом элементе select. Событие изменения нельзя использовать, поскольку любые дальнейшие изменения невозможны, если выбран один параметр, а все остальные параметры отключены. dataset
элемента option используется для поиска, чтобы определить, был ли уже выбран этот элемент до текущей обработки клика.
function handleOptionClickBehavior({ target }) {
const optionNode = target.closest('option');
const nodeValue = optionNode?.value;
if (nodeValue === 'tag') {
const optionNodeList = [...optionNode.parentNode.children]
.filter(node => node !== optionNode);
const { dataset } = optionNode;
if (dataset.hasOwnProperty('selectedBefore')) {
Reflect.deleteProperty(dataset, 'selectedBefore');
optionNode.selected = false;
optionNodeList
.forEach(node => node.disabled = false);
} else {
dataset.selectedBefore = '';
optionNodeList
.forEach(node => node.disabled = true);
}
}
}
document
.querySelector('.selectpicker')
.addEventListener('click', handleOptionClickBehavior)
body { zoom: 1.2 }
<select class = "input-fields selectpicker" id = "select_heigh" name = "search[]" size = "5" multiple>
<option value = "all" selected>Search all</option>
<option value = "tag">Tags</option>
<option value = "username">Username</option>
<option value = "email">Email</option>
<option value = "full_name">Full Name</option>
</select>
Спасибо за помощь. Я до сих пор не понимаю, почему это плохой интерфейс. Как поступить, если не так?
@ Джейк, потому что это, кажется, идет вразрез с ожиданиями относительно того, как работает Интернет (по крайней мере, я лично так к этому отношусь); возможно, стоит задать вопрос на одном из наших дочерних сайтов, а именно: User Experience.
Спасибо, буду спрашивать там любые предложения.
Потому что, если пользователь выбирает что-то, он ожидает, что выберет снова, если выберет неправильный выбор. С таким подходом вы идете против правил доступности.
Проверьте это из