Tengo un select2 v4.0.0 poblado de una matriz Ajax. Si configuro el valor del select2, puedo ver a través de la depuración de JavaScript que ha seleccionado el elemento correcto (n. ° 3 en mi caso), sin embargo, esto no se muestra en el cuadro de selección, todavía muestra el marcador de posición.
Considerando que debería estar viendo algo como esto:
En mis campos de formulario:
<input name="creditor_id" type="hidden" value="3">
<div class="form-group minimal form-gap-after">
<span class="col-xs-3 control-label minimal">
<label for="Creditor:">Creditor:</label>
</span>
<div class="col-xs-9">
<div class="input-group col-xs-8 pull-left select2-bootstrap-prepend">
<select class="creditor_select2 input-xlarge form-control minimal select2 col-xs-8">
<option></option>
</select>
</div>
</div>
</div>
Mi javascript:
var initial_creditor_id = "3";
$(".creditor_select2").select2({
ajax: {
url: "/admin/api/transactions/creditorlist",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term,
c_id: initial_creditor_id,
page: params.page
};
},
processResults: function (data, page) {
return {
results: data
};
},
cache: true
},
placeholder: "Search for a Creditor",
width: "element",
theme: "bootstrap",
allowClear: true
}).on("select2:select", function (e) {
var selected = e.params.data;
if (typeof selected !== "undefined") {
$("[name='creditor_id']").val(selected.creditor_id);
$("#allocationsDiv").hide();
$("[name='amount_cash']").val("");
$("[name='amount_cheque']").val("");
$("[name='amount_direct']").val("");
$("[name='amount_creditcard']").val("");
}
}).on("select2:unselecting", function (e) {
$("form").each(function () {
this.reset()
});
("#allocationsDiv").hide();
$("[name='creditor_id']").val("");
}).val(initial_creditor_id);
¿Cómo puedo hacer que el cuadro de selección muestre el elemento seleccionado en lugar del marcador de posición? ¿Debería enviar esto como parte de la respuesta AJAX JSON quizás?
En el pasado, Select2 requería una opción llamada initSelection que se definía cada vez que se usaba una fuente de datos personalizada, lo que permitía determinar la selección inicial del componente. Esto funcionó bien para mí en v3.5.
fuente
select
conajax
un error de subida, esa opción ajax no está permitida con seleccionar ...Respuestas:
Está haciendo la mayoría de las cosas correctamente, parece que el único problema que tiene es que no está activando el
change
método después de haber establecido el nuevo valor. Sin unchange
evento, Select2 no puede saber que el valor subyacente ha cambiado, por lo que solo mostrará el marcador de posición. Cambiando tu última parte aDebería solucionar su problema y debería ver la actualización de la interfaz de usuario de inmediato.
Esto es suponiendo que usted tiene una
<option>
ya que tiene unavalue
deinitial_creditor_id
. Si no selecciona2, y el navegador, no podrá cambiar el valor, ya que no hay ninguna opción a la que cambiar, y Select2 no detectará el nuevo valor. Noté que tu<select>
solo contiene una única opción, la del marcador de posición, lo que significa que tendrás que crear la nueva<option>
manualmente.Y luego añádalo al en el
<select>
que inicializó Select2. Es posible que deba obtener el texto de una fuente externa, que es dondeinitSelection
solía entrar en juego, lo que aún es posible con Select2 4.0.0. Al igual que una selección estándar, esto significa que tendrá que realizar la solicitud AJAX para recuperar el valor y luego configurar el<option>
texto sobre la marcha para ajustarlo.Si bien esto puede parecer mucho código, así es exactamente como lo haría para los cuadros de selección que no son de Select2 para asegurarse de que se hayan realizado todos los cambios.
fuente
val()
lugar de un solo identificador. O simplemente agregue varios<option selected>
y eso debería manejarse automáticamente.$select.trigger('change');
la opción todavía tiene el texto Cargando ... , aunquedata.text
tenía exactamente el texto que quería. Quizás esto ya no sea compatible con 4.0.6 .Lo que hice es más limpio y necesito hacer dos matrices:
Inicializo select2 usando la primera matriz como datos y la segunda como val.
Una función de ejemplo con como parámetros un dict de id: name.
Puede alimentar el valor de las iniciales usando llamadas ajax y usar jquery promises para hacer la inicialización select2.
fuente
<option>
no parece ser la forma más lógica de hacerlo. Así es como lo hago en 4.0data
opción es solo generar<option>
etiquetas y agregarlas a la selección. Esta respuesta no cubre cómo maneja los casos en los que necesita ir a una API para obtener más información, pero supongo que ese es un caso menos típico.Funciona para mí ...
No use jQuery, solo HTML: cree el valor de opción que mostrará como seleccionado . Si el ID está en los datos de select2 , se seleccionará automáticamente.
Select2.org - Valores predeterminados preseleccionados
fuente
El problema de
trigger('change')
verme obligado a volverme loco, ya que tenía un código personalizado en elchange
activador, que solo debería activarse cuando el usuario cambia la opción en el menú desplegable. En mi opinión, el cambio no debe activarse al establecer un valor de inicialización al inicio.Cavé profundo y encontré lo siguiente: https://github.com/select2/select2/issues/3620
Ejemplo:
$dropDown.val(1).trigger('change.select2');
fuente
Un escenario que no he visto que la gente realmente responda, es cómo tener una preselección cuando las opciones provienen de AJAX y puede seleccionar varias. Dado que esta es la página de acceso para la preselección de AJAX, agregaré mi solución aquí.
fuente
Si está utilizando templateSelection y ajax, es posible que algunas de estas otras respuestas no funcionen. Parece que la creación de un nuevo
option
elemento y la configuración devalue
ytext
no satisfará el método de la plantilla cuando sus objetos de datos usen otros valores además de id y text.Esto es lo que funcionó para mí:
Echa un vistazo a jsFiddle aquí: https://jsfiddle.net/shanabus/f8h1xnv4
En mi caso, tuve que
processResults
ingresar ya que mis datos no contenían los campos obligatoriosid
ytext
. Si necesita hacer esto, también deberá ejecutar su selección inicial a través de la misma función. Al igual que:fuente
después de pasar unas horas buscando una solución, decidí crear la mía propia. El es:
Y puede inicializar las selecciones usando esta función:
Y, por supuesto, aquí está el html:
fuente
Para una solución simple y semántica, prefiero definir el valor inicial en HTML, ejemplo:
Entonces, cuando llamo
$('select').select2({ ajax: {...}});
al valor inicial esinitial-value
y su texto de opción esInitial text
.Mi versión actual de Select2 es 4.0.3 , pero creo que tiene una gran compatibilidad con otras versiones.
fuente
initial-value
y el textoInitial text
actúa como un marcador de posición, no se envía a la base de datos. Está funcionando en mi aplicación.https://github.com/select2/select2/issues/4272 solo esto resolvió mi problema. Incluso si establece el valor predeterminado por opción, debe formatear el objeto, que tiene el atributo de texto y esto es lo que desea mostrar en su opción. por lo tanto, su función de formato debe usar
||
para elegir el atributo que no está vacío.fuente
¡Estoy agregando esta respuesta principalmente porque no puedo comentar arriba! Descubrí que fue el comentario de @Nicki y su jsfiddle, https://jsfiddle.net/57co6c95/ , lo que finalmente hizo que esto funcionara para mí.
Entre otras cosas, dio ejemplos del formato necesario para el json. El único cambio que tuve que hacer fue que mis resultados iniciales se devolvieron en el mismo formato que la otra llamada ajax, así que tuve que usar
más bien que
fuente
Cree un combo ajax simple con el valor seleccionado inicial para select2 4.0.3
biblioteca .js
y el lado del servidor php
fuente
Hola, casi salgo de esto y regresa para seleccionar 3.5.1. ¡Pero finalmente obtuve la respuesta!
Solo asegúrese de que la nueva opción sea una de las opciones select2. Consigo esto por un json.
fuente