web-dev-qa-db-ja.com

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

何か案は？それは簡単にする必要があります:)私はそれを見逃しています。

javascriptjqueryhtmlselectize.js
53
fat fantasma

API Docsを確認してください

メソッドaddOption(data)およびsetValue(value)は、あなたが探しているものかもしれません。

更新：この回答の人気を見て、ここにコメント/リクエストに基づいた追加情報があります...

setValue(value, silent)
選択したアイテムを指定された値にリセットします。
「silent」が真実の場合（つまり、true、1）、元の入力で変更イベントは発生しません。

addOption(data)
利用可能なオプションまたはオプションの配列を追加します。既に存在する場合、何も起こりません。
注：これはオプションリストのドロップダウンを更新しません（そのためには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
65
Tomanow

これは私のために働く：

var $select = $("#my_input").selectize();
var selectize = $select[0].selectize;
selectize.setValue(selectize.search("My Default Value").items[0].id);

ただし、一致するのは1つだけであることを本当に確認する必要があります。

更新：このソリューションは完璧に機能するため、ページに複数の選択要素があっても機能するように順番に答えを更新しました：

以下の方法で初期化できます。

$('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");
34
onlyblank

ユーザー「onlyblank」による回答は正しいです。それに加えて、必要に応じて複数のデフォルト値を設定できます。

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);
13
Shubham

リモート検索のタグを使用した完全なコードを次に示します。これが役に立てば幸いです。

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

注setValueは、値が動的である可能性があるコントロール（たとえば、ユーザーがその場で値を追加できる、テキストボックスfield）setValue動作しません。

Selectizeフィールドの現在の値を追加および設定するには、代わりにcreateItem functonを使用します

例.

$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
5
Jplus2

同じ問題にぶつかり、次のコード行で解決しました。

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

簡単な答え：

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

私はこれと同じ問題を抱えていました-RailsでSelectizeを使用していて、関連付けフィールドを選択したい-関連付けられたレコードの名前をドロップダウンに表示したかったのですが、各オプションの値が必要でしたRailsはvalueを使用して関連付けを設定するため、レコードのIDになります。

@valueAttrのc​​offeescript変数を各オブジェクトのidに設定し、@dataAttrの変数をレコードのnameに設定することでこれを解決しました。次に、各オプションを調べて設定しました：

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

完全な差分を確認するのに役立ちます： https://github.com/18F/C2/pull/912/files

2
Jessie A. Young

同様の問題がありました。データはリモートサーバーから提供されます。選択ボックスに値を入力したいのですが、この値がサーバー上で有効な値であるかどうかは事前にはわかりません。

そのため、値をボックスに入力し、ユーザーが値を入力した場合と同じように、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();
1
johanv

最初に選択ドロップダウンをロードしてから選択します。通常の$（select）.val（）で動作します。

0
Lakin Mohapatra