Как закрыть список опций в select-list selectize.js?
У меня есть список с множественным выбором selectized.js, который создается со всеми параметрами, из которых пользователь может выбирать. Я использовал следующие команды для программного выбора каждого параметра, который был сохранен в базе данных, но помимо выбора параметров отображается список параметров:
// Create a variable that 'points' to the listSelect selelect list that
// has been converted to a selectize list. The list already has all of the
// options in it.
$listSelectize = $( '#listSelect' );
// Clear all previously selected options ...
$listSelectize[ 0 ].selectize.clear( true ); // Clear previous selections.
// Select each list option that was saved in the database ...
// This is a test example ...
$listSelectize[ 0 ].selectize.addItem( 'option_one', true );
// The above command correctly select the option with the 'option_one' value,
// but it also causes the option list drop-down to be displayed.
// I've tried using the following commands to close the option list, but the
// drop-down list remains open.
$listSelectize[ 0 ].selectize.close();
// I've noticed that if after the form becomes interactive, that I can click
// it and the list closes, so the next few commands try to simulate this
// programmatically, but the list remains open, anyway.
$listSelectize[ 0 ].selectize.blur(); // Documentation says this should
// force the focus away from the list.
$listSelectize[ 0 ].blur(); // This should do the same.
document.getElementById( 'firstInput' ).focus();
Есть ли способ выбрать открытия, не открывая раскрывающийся список параметров?
Если нет, как я могу закрыть его, чтобы пользователь не увидел его, когда форма станет пригодной для использования?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Не могу сказать из вашего образца кода, почему ваше меню выбора остается открытым. См. Рабочий фрагмент ниже, где параметр выбора выбирается автоматически, но меню выбора не открывается. Также добавлена пара кнопок для запуска функций выбора open() и close(), чтобы вы также могли их протестировать. Вам может потребоваться проверить наличие конфликтующих jquery, js или css, которые не включены в ваш вопрос, чтобы найти источник вашей проблемы.
const options = [
{id: 1, name: "option1"},
{id: 2, name: "option2"},
{id: 3, name: "option3"}
];
const select = $('#select1').selectize({
options: options,
valueField: 'name',
labelField: 'name',
searchField: ['name'],
persist: false,
create: true
});
const openBtn = document.querySelector('#open');
const closeBtn = document.querySelector('#close');
openBtn.addEventListener('click', function(event) {
select[0].selectize.open();
});
closeBtn.addEventListener('click', function(event) {
select[0].selectize.close();
});
select[0].selectize.addItem('option2');<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<title>Selectize</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.default.min.css">
</head>
<body>
<button id = "open">Open</button>
<button id = "close" style = "margin-bottom: 8px;">Close</button>
<form action = "" method = "POST">
<input id = "select1" name = "select1" type = "text" />
<button type = "submit">Submit</button>
</form>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js"></script>
</body>
</html>Вы случайно не знаете, как я могу использовать метод загрузки для выбора элементов в списке параметров, не сбрасывая параметры? Список параметров для выбора уже находится на стороне клиента браузера, поэтому вызов ajax не требуется.
Вы просто пытаетесь по умолчанию выбрать определенные параметры при первом отображении выбора? Если да, см. этот пример кода для выбора по умолчанию опций выбора.
Нет, список, который я создаю, содержит музыкальные категории, из которых пользователь может выбрать одну или несколько для заполнения поля в записи, которая затем сохраняется в базе данных. Позже пользователь может изменить эту запись, включая музыкальные категории. Список теперь содержит около 360 категорий и групп категорий, таких как Рок и Кантри. Я использую selectize в элементе html <select> с элементами <optgroup> и <option>. Однако, поскольку список такой большой, я не хочу уничтожать и воссоздавать его. Скорее, я хочу очистить выбранные элементы и повторно выбрать ранее сохраненные элементы в базе данных.
Ваше решение, если я понимаю, потребует, чтобы я воссоздавал список каждый раз при создании или редактировании записи, чего я действительно не хочу делать. Я надеюсь создать выбранный список со всеми опциями, группами опций и кодом обработки событий. Затем, когда пользователь создает / редактирует запись, я очищаю все ранее выбранные элементы параметров, выбираю сохраненные элементы в случае редактирования, а затем отображаю список в своей форме.
Посмотрев на код, который вы разместили в своем ответе, а затем на пример кода для выбора по умолчанию выбранных параметров, я вижу, помимо создания списка и выбранных элементов из массивов, а не элементов <select>, <optgroup> и <option> , что эти решения, похоже, не обрабатывают повторный выбор элементов, а скорее должны уничтожить и воссоздать весь список. Вот почему я спросил об использовании метода загрузки, который может повторно выбрать еще один параметр в <options> списка <select> и добавить новые параметры, так как пользователь может добавлять новые параметры в список.
Обратите внимание: когда страница загружается впервые, она содержит все записи пользователя и ранее выбранные музыкальные категории в каждой записи, поэтому мне нужно создать список <select>, <optgroup>, <option> только тогда, когда паштет будет первым. загружен и преобразован в список выбора один раз. Когда пользователь создает новую запись, я сохраняю данные в базе данных с помощью вызова ajax и в новой строке в таблице, где есть строка для каждой записи. Когда пользователь редактирует существующую запись, я обновляю данные в базе данных с помощью вызова ajax и заменяю данные в строке таблицы для этой записи.
Кстати, мне удалось воспроизвести проблему, о которой я сообщил в этом вопросе, используя код из вашего первого ответа - список параметров открывается и остается открытым, когда параметры выбираются с помощью метода addItem. К сожалению, я все еще пытаюсь понять, почему это происходит.
Вам не нужно воссоздавать список параметров каждый раз, когда пользователь создает или обновляет свой личный список предпочтительных категорий (метод load действительно создает список параметров при инициализации элемента управления selectize, поэтому не уверены, что это то, что вы хотите при обновлении) . Когда страница загружается и при последующих обновлениях, почему бы вам просто не просмотреть выбранные пользователем параметры и не использовать select[0].selectize.addItem(item) для заполнения поля обновленными параметрами (и select[0].selectize.clear() заранее, если это обновление после того, как страница уже загружена)?
Кроме того, если вы сможете воссоздать проблему «залипания» элемента управления selectize в фрагменте вашего вопроса (или в скрипке или ручке), тогда мы сможем помочь вам разобраться в этом.
Спасибо, что снова ответили. Я выставлю свой список выбора в CodePen. Я использовал select [0] .selectize.clear () и select [0] .selectize.addItem (...), как вы предлагаете. Именно тогда я обнаружил, что список «торчит».
Вот URL демонстрации CodePen: codepen.io/howardb1/pen/aazWwY Когда вы открываете страницу, список заполняется демонстрационными данными, и отображается предупреждение, указывающее, что список откроется после нажатия кнопки OK. Вы можете прокрутить вниз до кода, который инициализирует список демонстрационными данными, выполнив поиск по запросу '// ============================== ====== '.
Похоже, проблема связана с функцией itemAdd, которую вы вызываете из метода onItemAdd при инициализации элемента управления selectize. Эта функция вызывает как refreshItems(), так и refreshOptions(), оба из которых устанавливают фокус на элемент управления и вызывают его открытие. Если вы закомментируете метод onItemAdd, вы поймете, что я имею в виду. Я только бегло посмотрел, но не уверен, что вам вообще нужен этот метод.
Спасибо за помощь! Хороший улов. Обработчик событий itemAdd добавляет обработчик щелчка по удаленному элементу к новым элементам, которые пользователь добавляет в список, и прокручивает новые добавленные элементы в представлении, оба из которых необходимы только после того, как список становится интерактивным. Итак, я могу заблокировать обновления при выполнении беззвучного addItem. Еще раз спасибо.
Браво Бенвку. Ваше наблюдение о вызовах методов refreshItmes () и refreshOptions () в функции onItemAdd itemAdd было точным. Как я указывал в своем последнем комментарии, я добавил интерактивную переменную и установил для нее значение false, когда ожидал «молча» сбросить элементы в списке выбора, а затем установить для интерактивного значения true по завершении сброса. Затем я добавил оператор if, который включал вызовы обновления и прокрутку списка в функцию itemAdd, чтобы эти операторы выполнялись только тогда, когда значение Interactive равно true.
Еще раз спасибо!
Спасибо за пример. Я помещаю его в CodePen и добавляю свой собственный код, чтобы увидеть, какая часть моего кода вызывает проблему.