Hoe stel je een waarde in voor een selectize.js-invoer?

Ik heb een formulier waarvan ik enkele standaardwaarden naar de invoer wil kopiëren. De formulierinvoer maakt gebruik van de plug-in selectize.js. Ik zou graag enkele van de formulierwaarden programmatisch instellen. De standaard manier om dit te doen:

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

werkt niet.

Ik heb zoiets geprobeerd, maar het werkt ook niet.

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

Enig idee? Het moet makkelijk zijn 🙂 Ik mis het.

Antwoord 1, autoriteit 100%

Bekijk de API-documenten

Methoden addOption(data)en setValue(value)zijn misschien wat u zoekt.

Update: gezien de populariteit van dit antwoord, volgt hier wat aanvullende informatie op basis van opmerkingen/verzoeken…

setValue(value, silent)
  Zet de geselecteerde items terug op de opgegeven waarde.
Als “stil” waarheidsgetrouw is (dwz: true, 1), wordt er geen wijzigingsgebeurtenis geactiveerd op de oorspronkelijke invoer.

addOption(data)
  Voegt een beschikbare optie of een reeks opties toe. Als het al bestaat, gebeurt er niets.
  Opmerking: dit vernieuwt de vervolgkeuzelijst met opties niet (gebruik daarvoor refreshOptions()).

Als reactie op het overschrijven van opties:
Dit kan gebeuren door de select opnieuw te initialiseren zonder de opties te gebruiken die u aanvankelijk hebt opgegeven. Als u niet van plan bent het element opnieuw te maken, slaat u het selectize-object gewoon op in een variabele:

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

Antwoord 2, autoriteit 44%

Dit werkt voor mij:

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

maar je moet er echt zeker van zijn dat je maar één match hebt.

Update: aangezien deze oplossing perfect werkt, heb ik het antwoord bijgewerkt om het te laten werken, zelfs als er meerdere geselecteerde elementen op de pagina zijn:

Volgende manier waarop we kunnen initialiseren:

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

Pragmatische waarde instellen na initialisatie:

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

Antwoord 3, autoriteit 17%

Antwoord van de gebruiker ‘onlyblank’ is juist. Een kleine toevoeging daaraan: je kunt meer dan 1 standaardwaarden instellen als je wilt.

In plaats van id door te geven aan setValue(), geef je een array door. Voorbeeld:

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

Antwoord 4, autoriteit 15%

Hier is mijn volledige code met tag van zoeken op afstand. Ik hoop dat dit nuttig is.

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

Antwoord 5, autoriteit 13%

Een vereenvoudigd antwoord:

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

Antwoord 6, autoriteit 7%

Opmerking setValuewerkt alleen als er al een vooraf gedefinieerde set waarden is voor het selectize-besturingselement (bijv. select field), voor besturingselementen waarbij de waarde dynamisch kan zijn (bijv. de gebruiker kan waarden toevoegen aan de fly, tekstvakveld ) setValuegaat niet werken.

Gebruik in plaats daarvan de functie createItemvoor het toevoegen en instellen van de huidige waarde van het selectize-veld

bijv.

$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

Antwoord 7, autoriteit 6%

kwam zojuist hetzelfde probleem tegen en loste het op met de volgende regel code:

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

Antwoord 8, autoriteit 2%

Ik had hetzelfde probleem – ik gebruik Selectize with Rails en wilde een associatieveld selecteren – ik wilde dat de naam van het gekoppelde record in de vervolgkeuzelijst zou verschijnen, maar ik had de waarde van elke optie nodig om de id van het record, aangezien Rails de valuegebruikt om associaties in te stellen.

Ik heb dit opgelost door een coffeescript var van @valueAttrin te stellen op de idvan elk object en een var van @dataAttrop de namevan het record. Daarna heb ik elke optie doorgenomen en ingesteld:

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

Het helpt om het volledige verschil te zien: https://github.com/18F/ C2/pull/912/bestanden

Antwoord 9

Ik had een soortgelijk probleem. Mijn gegevens worden geleverd door een externe server. Ik wil dat er een waarde wordt ingevoerd in de selectize-box, maar het is niet van tevoren zeker of deze waarde geldig is op de server.

Dus ik wil dat de waarde in het vak wordt ingevoerd, en ik wil selecteren om de mogelijke opties weer te geven, net als de gebruiker de waarde had ingevoerd.

Ik heb uiteindelijk deze hack gebruikt (die waarschijnlijk niet wordt ondersteund):

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

Antwoord 10

Laad eerst het keuzemenu en selecteer het vervolgens.
Het werkt met normaal $(select).val().

Antwoord 11

var $select = $(document.getElementById("selectTagName"));
var selectize = $select[0].selectize;
selectize.setValue(selectize.search("My Default Value").items[0]);