javascript - change - Cómo obtener el valor del elemento de entrada seleccionado Selectize.js actualmente

selectize on change

Question

Me preguntaba, ¿cómo podría obtener el valor del elemento seleccionado actualmente en mi entrada Selectize.js? Revisé la documentación y busqué todo lo relacionado con selectize.js en Stackoverflow pero no encontré nada en el camino de un ejemplo en el que pudiera irme. ¿Algunas ideas? Esto es lo que pensé que funcionaría según la documentación, pero en cambio me dio Undefined is not a function error de Undefined is not a function .

Tenga en cuenta la parte inferior del código, donde uso select.on(''change'' ; esto (además de otros métodos API) es lo que he intentado. El cambio funciona perfectamente, pero desafortunadamente nada más lo ha hecho.

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

Answer 1

¡Encontrado el problema!

Para cualquiera que use selectize.js y tenga problemas con la API, ¡intente esto!

Si miras la parte del código donde inicialicé el menú desplegable selectize.js, almaceno la instancia en mi variable ''select'' y eso es todo. Sin embargo, esta no es la forma correcta de hacer las cosas (por lo que he visto al menos). Debe hacer lo siguiente, en lugar de simplemente almacenar la instancia en una variable.

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

var selectizeControl = $select[0].selectize

Después de hacer esto, puede usar la API correctamente. Sin hacerlo de esta manera, Undefined is not a function error Undefined is not a function .

Finalmente, para responder mi propia pregunta, pude recuperar el valor actual de la entrada de selección usando el siguiente código (obviamente, el .on (''cambio'') y la alerta no son necesarios):

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

Por qué es necesario hacerlo de esta manera, no estoy exactamente seguro. Quizás alguien podría iluminarme a mí y a cualquier espectador futuro sobre por qué funciona de esta manera y mi método anterior no.

Espero que esto ayude a alguien más en el futuro. Siéntete libre de editar y hacer cualquier cambio.

Answer 2

En lugar de adjuntar el evento más tarde, puede hacerlo en la inicialización:

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

Consulte los documentos para obtener más devoluciones de llamada.

Answer 3

En mis pruebas, selectize actualiza de manera inmediata el valor de <select> it ''replaced'' (en realidad solo oculta el <select> usando display: none ).

Entonces, si no quiere usar devoluciones de llamadas ni variables globales, es tan simple como:

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