Как установить значение для selectize.вход js?
у меня есть форма, из которой я хотел бы скопировать некоторые значения по умолчанию во входные данные. Форма входа используют selectize.плагин JS. Я хотел бы установить некоторые значения формы программно. Стандартный способ сделать это:
$("#my_input").val("My Default Value");
не работает.
Я пробовал что-то вроде этого, но это тоже не работает.
var $select = $("#my_input").selectize();
var selectize = $select[0].selectize;
selectize.setValue("My Default Value");
какие идеи? Это должно быть легко :) мне этого не хватает.
9 ответов
Регистрация API Docs
методы addOption(data)
и setValue(value)
может быть то, что вы ищете.
обновление: видя популярность этого ответа, вот дополнительная информация с учетом замечаний/пожеланий...
setValue(value, silent)
сбрасывает выбранные элементы до заданного значения.
Если"молчит " является правдивым (т. е.:true
,1
), не менять событие будет запущено на исходном входе.
addOption(data)
добавляет доступный параметр или массив параметров. Если она уже существует, ничего не произойдет.
Примечание: это не обновляет выпадающий список опций (используйтеrefreshOptions()
для этого).
в ответ на перезапись параметров:
Это может произойти путем повторной инициализации select без использования первоначально предоставленных параметров. Если нет намереваясь воссоздать элемент, просто сохраните объект selectize в переменной:
// 1. Only set the below variables once (ideally)
var $select = $('select').selectize(options); // This initializes the selectize control
var selectize = $select[0].selectize; // This stores the selectize object to a variable (with name 'selectize')
// 2. Access the selectize object with methods later, for ex:
selectize.addOption(data);
selectize.setValue('something', false);
// Side note:
// You can set a variable to the previous options with
var old_options = selectize.settings;
// If you intend on calling $('select').selectize(old_options) or something
это работает для меня:
var $select = $("#my_input").selectize();
var selectize = $select[0].selectize;
selectize.setValue(selectize.search("My Default Value").items[0].id);
но вы должны быть действительно уверены, что у вас есть только один матч.
обновление: поскольку это решение работает идеально, чтобы заставить его работать, даже если на странице есть несколько элементов выбора, я обновил ответ:
следующим образом мы можем инициализировать:
$('select').each(function (idx) {
var selectizeInput = $(this).selectize(options);
$(this).data('selectize', selectizeInput[0].selectize);
});
установка значения прагматически после инициализации:
var selectElement = $('#unique_selector').eq(0);
var selectize = selectElement.data('selectize');
if (!!selectize) selectize.setValue("My Default Value");
ответ пользователя "onlyblank" является правильным. Небольшое дополнение к этому - Вы можете установить более 1 значения по умолчанию, если вы хотите.
вместо передачи идентификатора setValue () передайте массив. Пример:
var $select = $("#my_input").selectize();
var selectize = $select[0].selectize;
var yourDefaultIds = [1,2]; # find the ids using search as shown by the user onlyblank
selectize.setValue(defaultValueIds);
просто столкнулся с той же проблемой и решил ее со следующей строкой кода:
selectize.addOption({text: "My Default Value", value: "My Default Value"});
selectize.setValue("My Default Value");
вот мой полный код, используя метку из удаленного поиска. Надеюсь, это поможет.
$('#myInput').selectize({
valueField: 'id',
labelField: 'name',
searchField: 'name',
options: [],
delimiter: ',',
persist: false,
create: false,
load: function(query, callback) {
if (!query.length) return callback();
$.ajax({
url: '/api/all_cities.php',
type: 'GET',
dataType: 'json',
data: {
name: query,
},
error: function() {
callback();
},
success: function(res) {
callback(res);
}
});
},
onInitialize: function(){
var selectize = this;
$.get("/api/selected_cities.php", function( data ) {
selectize.addOption(data); // This is will add to option
var selected_items = [];
$.each(data, function( i, obj) {
selected_items.push(obj.id);
});
selectize.setValue(selected_items); //this will set option values as default
});
}
});
Примечание setValue работает, только если уже есть предопределенный набор значений для элемента управления selectize (ex. выберите поле), для элементов управления, где значение может быть динамическим ( например. пользователь может добавлять значения на лету, текстовое поле)setValue не сработает.
использовать операции createitem функция вместо добавления и установки текущего значения поля selectize
ex.
$selectize[ 0 ].selectize.clear(); // Clear existing entries
for ( var i = 0 ; i < data_source.length ; i++ ) // data_source is a dynamic source of data
$selectize[ 0 ].selectize.createItem( data_source[ i ] , false ); // false means don't trigger dropdown
у меня была такая же проблема - я использую Selectize с Rails и хотел выбрать поле ассоциации - я хотел, чтобы имя связанной записи отображалось в раскрывающемся списке, но мне нужно было, чтобы значение каждого параметра было идентификатором записи, так как Rails использует value
установить объединений.
я решил это, установив coffeescript var @valueAttr
до id
каждого объекта и var @dataAttr
до name
записи. Затем я прошел через каждый вариант и установил:
opts.labelField = @dataAttr
opts.valueField = @valueAttr
это помогает увидеть полную разницу:https://github.com/18F/C2/pull/912/files
первой загрузке выберите в выпадающем списке и затем selectize его. Он будет работать с обычным $(select).вал.)(
У меня была похожая проблема. Мои данные предоставляются удаленным сервером. Я хочу, чтобы некоторое значение было введено в поле selectize, но он не уверен заранее, является ли это значение допустимым на сервере.
поэтому я хочу, чтобы значение было введено в поле, и я хочу, чтобы selectize показывал возможные параметры, если пользователь ввел значение.
Я закончил использовать этот хак (который, вероятно, не поддерживается):
var $selectize = $("#my_input").selectize(/* settings with load*/);
var selectize = $select[0].selectize;
// get the search from the remote server
selectize.onSearchChange('my value');
// enter the input in the input field
$selectize.parent().find('input').val('my value');
// focus on the input field, to make the options visible
$selectize.parent().find('input').focus();