web-dev-qa-db-fra.com

selectize.js liste déroulante de rechargement

J'ai un menu déroulant avec l'id "selectCountry" rempli par ajax et en cas de succès, je lie simplement Selectize.

$('#selectCountry').selectize({
    create: true,
    sortField: 'text' 
});

Lorsque je relie ma liste déroulante d'origine par ajax et que j'essaie de recharger/réassocier ou d'actualiser l'ancienne boîte de sélection automatique en cas de succès, il n'y aurait aucun changement sur l'ancienne liste.

Est-il possible de recharger ou d'actualiser la liste déroulante de sélection? J'avais essayé "clearOptions ()" et "refreshOptions ()".

P.S, je ne veux pas lier directement le selectize de ajax.

OK, maintenant j'ajoute un exemple de travail pour ce numéro sur jsfiddle

S'il vous plaît aidez-moi :( toute suggestion serait formidable pour moi. Merci beaucoup

javascriptjqueryjsonautocompleteselectize.js
10
Obaid Ahmed

Certains comment, j'ai trouvé la réponse et son travail ici

ajoutez simplement cette ligne de code et son fonctionnement.

$('#select-tools').selectize()[0].selectize.destroy();
13
Obaid Ahmed

On dirait que vous avez également ouvert un numéro sur le projet , qui n'est pas, à mon humble avis, un bon usage des problèmes du projet.

J'y ai répondu, je vais répéter la réponse au cas où cela pourrait être utile à d'autres personnes.

Vous ne devez pas recréer le composant Selectize à partir de la balise d'origine. Vous devriez l'utiliser pour mettre à jour ses options, en utilisant clearOptions () comme vous l'avez deviné, puis addOption () (malgré le singulier, il accepte un tableau). J'ai mis à jour votre violon (+1 pour en créer un) pour afficher ceci: https://jsfiddle.net/m06c56y0/20/

La partie pertinente est:

var selector;
$('#button-1').on('click', function () {
    selector = $('#select-tools').selectize({
        maxItems: null,
        valueField: 'id',
        labelField: 'title',
        searchField: 'title',
        options: [{
            id: 1,
            title: 'Spectrometer',
            url: 'http://en.wikipedia.org/wiki/Spectrometers'
        }, {
            id: 2,
            title: 'Star Chart',
            url: 'http://en.wikipedia.org/wiki/Star_chart'
        }],
        create: false
    }).data('selectize');
});

$('#button-2').on('click', function () {
    console.log(selector);
    selector.clearOptions();
    selector.addOption([{
            id: 1,
            title: 'Spectrometer',
            url: 'http://en.wikipedia.org/wiki/Spectrometers'
        }, {
            id: 3,
            title: 'Electrical Tape',
            url: 'http://en.wikipedia.org/wiki/Electrical_tape'
        }]);
});
7
PhiLho

Vous pouvez aussi faire ceci:

$('#whateverYouCalledIt').selectize()[0].selectize.clear();

pour simplement effacer ce qui a été sélectionné. Cela n'effacera pas votre liste de sélection.

1
StealthRT