web-dev-qa-db-fra.com

Comment obtenir la valeur de l'élément d'entrée Selectize.js actuellement sélectionné

Je me demandais, comment pourrais-je obtenir la valeur de l'élément actuellement sélectionné dans mon entrée Selectize.js? J'ai vérifié la documentation et parcouru tout ce qui concerne selectize.js sur Stackoverflow, mais je n'ai trouvé aucun exemple d'exemple. Des idées? Voici ce que je pensais fonctionner sur la base de la documentation, mais au lieu de cela m'a donné Undefined is not a function Erreur.

Veuillez noter tout en bas du code, où j'utilise le select.on('change'; c'est (en plus d'autres méthodes API) ce que j'ai essayé. Le changement fonctionne parfaitement, mais malheureusement rien d'autre ne l'a fait.

var select = $('#searchTextbox').selectize({
          maxItems: 1, //Max items selectable in the textbox
          maxOptions: 30, //Max options to render at once in the dropdown
          searchField: ['text'], //Fields the autocomplete can search through.  Example of another searchable field could be 'value'
          openOnFocus: true,
          highlight: true,
          scrollDuration: 60, //currently does nothing; should say how many MS the dropdown and drop up animations take
          create: false, //Whether or not the user is allowed to create fields
          selectOnTab: true,
          render: {
              option: function(data, escape) {
                  var valueArray = [];         
                  valueArray[0] = data.value.split(",");
                  var color = valueArray[0][0] == "1" ? "green" : "red";

                  return '<div class="option" style="color: ' 
                      + color 
                      + ';">' 
                      + escape(data.text) 
                      + '</div>';
              },
              item: function(data, escape) {
                  var valueArray = [];         
                  valueArray[0] = data.value.split(",");
                  var color = valueArray[0][0] == "1" ? "green" : "red";

                  return '<div class="option" style="color: ' 
                      + color 
                      + ';">' 
                      + escape(data.text) 
                      + '</div>';
              }      
          }
      });

select.on('change', function() {
      var test = select.getItem(0);
      alert(test.val());
});
javascriptjqueryjquery-pluginsselectize.js
33
twilco

Trouvé le problème!

Pour toute personne utilisant selectize.js et ayant des problèmes avec l'API, essayez ceci!

Si vous regardez la partie du code où j'ai initialisé la liste déroulante selectize.js, je stocke l'instance dans ma variable 'select' et c'est tout. Cependant, ce n'est pas la bonne façon de faire les choses (d'après ce que j'ai vu au moins). Vous devez effectuer les opérations suivantes, plutôt que de simplement stocker l'instance dans une variable.

var $select = $("#yourSelector").selectize({
    //options here
});

var selectizeControl = $select[0].selectize

Après cela, vous pouvez utiliser l'API correctement. Sans le faire de cette façon, je recevais un Undefined is not a function Erreur.

Enfin, pour répondre à ma propre question, j'ai pu récupérer la valeur actuelle de l'entrée de sélection en utilisant le code suivant (le .on ('change') et l'alerte ne sont évidemment pas nécessaires):

selectizeControl.on('change', function() {
      var test = selectize.getValue();
      alert(test);
});

Pourquoi il est nécessaire de procéder de cette façon, je ne suis pas exactement sûr. Peut-être que quelqu'un pourrait m'éclairer et expliquer aux futurs téléspectateurs pourquoi cette méthode fonctionne et ma méthode précédente ne l'a pas fait.

J'espère que cela aidera quelqu'un d'autre à l'avenir. N'hésitez pas à modifier et à apporter des modifications.

37
twilco

Plutôt que d'attacher l'événement plus tard, vous pouvez le faire lors de l'initialisation:

var select = $('#searchTextbox').selectize({
          maxItems: 1, //Max items selectable in the textbox
          maxOptions: 30, //Max options to render at once in the dropdown
          ...
          onChange: function(value) {
               alert(value);
          }
      });

Consultez le docs pour plus de rappels.

31
basher

Dans mes tests, sélectionner immédiatement met à jour la valeur du <select> Qu'il a "remplacé" (en fait, il ne cache que le <select> En utilisant display: none).

Donc, si vous ne voulez utiliser ni rappels ni variables globales, c'est aussi simple que:

$('#id_of_the_select_element_you_called_selectize_on').val().

4
sandre89