Как установить значение для входа selectize.js?

Ответ 1

Проверьте Документы API

Методы addOption(data) и setValue(value) могут быть тем, что вы ищете.

Обновление: увидев популярность этого ответа, вот несколько дополнительных сведений, основанных на комментариях/запросах...

setValue(value, silent)
& emsp; Сбрасывает выбранные объекты на заданное значение.
& ЕПРС; Если " молчание" является правдивым (например: true, 1), событие изменения не будет запущено на исходном входе.

addOption(data)
& emsp; Добавляет доступную опцию или массив параметров. Если он уже существует, ничего не произойдет.
& emsp; Примечание: это не обновляет раскрывающийся список опций (используйте для этого refreshOptions()).

В ответ на перезаписываемые параметры:
Это может произойти путем повторной инициализации выбора без использования параметров, которые вы изначально предоставили. Если вы не собираетесь воссоздать элемент, просто сохраните объект 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

Ответ 2

Это работает для меня:

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");

Ответ 3

Ответа на этот вопрос пользователя onlybank. Небольшое дополнение к этому - вы можете установить более 1 значения по умолчанию, если хотите.

Вместо передачи id в 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);

Ответ 4

Вот мой полный код с использованием тега из удаленного поиска. Надеюсь, что это будет полезно.

$('#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
    });
}
});

Ответ 5

Примечание setValue работает только в том случае, если уже существует предопределенный набор значений для элемента управления selectize (например, поле выбора), для элементов управления, в которых значение может быть динамическим (например, пользователь может добавлять значения на fly, поле текстового поля) setValue не будет работать.

Используйте createItem functon вместо этого для добавления и установки текущего значения поля select

ех.

$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

Ответ 6

просто столкнулся с той же проблемой и решил ее со следующей строкой кода:

selectize.addOption({text: "My Default Value", value: "My Default Value"});
selectize.setValue("My Default Value"); 

Ответ 7

У меня была такая же проблема: я использую Selectize with Rails и хочу выбрать поле ассоциации - мне нужно, чтобы имя связанной записи отображалось в раскрывающемся списке, но мне нужно, чтобы значение каждой опции являлось id записи, поскольку Rails использует value для установки ассоциаций.

Я решил это, установив var @valueAttr для coffeescript var в id каждого объекта и var @dataAttr в name записи. Затем я просмотрел каждую опцию и установил:

 opts.labelField = @dataAttr
 opts.valueField = @valueAttr

Это помогает увидеть полный diff: https://github.com/18F/C2/pull/912/files

Ответ 8

У меня была аналогичная проблема. Мои данные предоставляются удаленным сервером. Я хочу, чтобы какое-то значение вводилось в поле 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();

Ответ 9

Сначала выберите выпадающее меню, а затем выберите его. Он будет работать с обычным $(select).val().

Ответ 10

Упрощенный ответ:

$('#my_input').data('selectize').setValue("Option Value Here");