Wie wird ein Wert für eine selectize.js-Eingabe festgelegt?

Question

Ich habe ein Formular, von dem ich einige Standardwerte in die Eingänge kopieren möchte. Die Formulareingaben verwenden das selectize.js-Plugin. Ich möchte einige der Formularwerte programmatisch setzen. Der Standard Weg dies zu tun:

$("#my_input").val("My Default Value"); 

funktioniert nicht.

Ich habe so etwas versucht, aber es funktioniert auch nicht.

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

Irgendwelche Ideen? Es muss einfach sein :) Ich vermisse es.

Answer 1

Überprüfen Sie die API Docs

Methoden addOption(data) und setValue(value) könnte sein, was Sie suchen.

---

aktualisieren: die Popularität dieser Antwort sehen, hier einige zusätzliche Informationen basierend auf Kommentare/Anfragen ...

setValue(value, silent)
  Resets die ausgewählten Elemente auf den angegebenen Wert .
  Wenn "silent" truthy ist (dh: true, 1), wird kein Änderungsereignis am ursprünglichen Eingang ausgelöst.

addOption(data)
  Fügt eine verfügbare Option oder ein Array von Optionen. Wenn es bereits existiert, wird nichts passieren.
  Hinweis: Dadurch wird das Dropdown-Menü für die Optionsliste nicht aktualisiert (verwenden Sie dafür refreshOptions()).

---

Als Reaktion auf Optionen überschrieben werden:
Dadurch wird die Auswahl nach Neuinitialisierung, ohne dass die Einstellungen Sie zunächst vorgesehen passieren kann. Wenn Sie nicht beabsichtigen, das Element zu erstellen, speichern Sie einfach die selectize Objekt einer Variablen:

// 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 

Answer 2

Dies funktioniert für mich:

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

aber Sie haben wirklich, wirklich sicher sein, dass Sie nur noch ein Spiel.

aktualisieren: Da diese Lösung funktioniert perfekt, in Ordnung es auch die Antwort, wenn es mehrere Auswahlelemente auf Seite arbeiten zu machen Ich habe aktualisiert:

Nach Art und Weise wir initialisieren können:

$('select').each(function (idx) { 
    var selectizeInput = $(this).selectize(options); 
    $(this).data('selectize', selectizeInput[0].selectize); 
}); 

Einstellwert pragmatisch Initialisierung schreiben:

var selectElement = $('#unique_selector').eq(0); 
var selectize = selectElement.data('selectize'); 
if (!!selectize) selectize.setValue("My Default Value"); 

Answer 3

ich das gleiche Problem hatte - ich bin mit Selec Tize mit Rails und wollte ein Assoziationsfeld auswählen - Ich wollte, dass der Name des verknüpften Datensatzes in der Dropdownliste angezeigt wird, aber ich brauche den Wert jeder Option als ID des Datensatzes, da Rails die value verwendet, um Assoziationen festzulegen .

Ich löste dies durch einen Coffee var von @valueAttr zum id jedes Objekt und ein var von @dataAttr zum name der Rekord. Dann ging ich durch jede Option und setzen:

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

Es hilft, die volle diff zu sehen: https://github.com/18F/C2/pull/912/files

Answer 4

Antwort vom Benutzer ‚onlyblank‘ korrekt ist. Eine kleine Ergänzung dazu- Sie können mehr als 1 Standardwerte festlegen, wenn Sie möchten.

Anstatt ID an setValue() zu übergeben, übergeben Sie ein Array. Beispiel:

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

Answer 5

Hinweis setValue funktioniert nur, wenn es bereits von Werten für die selectize Steuerung eingestellt vorgegeben, für die Kontrollen, wenn der Wert dynamisch sein könnte (ex Benutzer auf Werte hinzufügen können (ex Auswahlfeld.). die Fliege, Textfeld Feld) setValue wird nicht funktionieren.

Verwenden createItem functon stattdessen für das Hinzufügen und Einstellen des aktuellen Wertes des selectize Feld

ab.

$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 

Answer 6

liefen in das gleiche Problem und es mit der folgenden Codezeile gelöst:

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

Answer 7

Hier ist mein vollständiger Code von Remote-Suche mit Tag. Ich hoffe, das ist hilfreich.

Answer 8

Zuerst Dropdown-Liste laden und dann auswählen. Es wird mit normalen $ (select) .val() arbeiten.

Answer 9

Ich hatte ein ähnliches Problem. Meine Daten werden von einem Remote-Server bereitgestellt. Ich möchte, dass ein Wert in das Auswahlfeld eingegeben wird, aber es ist im Voraus nicht sicher, ob dieser Wert auf dem Server gültig ist.

Also ich möchte den Wert in das Feld eingegeben werden, und ich möchte selectize zeigen die möglichen Optionen nur, wenn wie der Benutzer den Wert eingegeben hatte.

Ich landete diesen Hack up verwenden (die es wahrscheinlich nicht unterstützt wird):

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