[Resuelto] select2 cambiar valor de lista dinamica con jquery

Iniciado por gAb1, 22 Abril 2016, 23:16 PM

0 Miembros y 1 Visitante están viendo este tema.

gAb1

Me acaba de dar cuenta de que uno de mis scripts no funciona correctamente. Se trata de 2 de las 3 listas que tengo para seleccionar provincia, ciudad y zona.

La primera lista al no ser dinamica simplemente uso change() para que select2 sepa que el valor ha cambiado y lo refleje (tanto el placeholder como el valor de la lista en sí).

En el caso de las otras dos listas, es algo increible... cada vez que refresco (F5) la página, estas dos listas hacen algo distinto... no sé si es porque son dinamicas, pero no funciona.

Buscando en google he visto que para estos casos se usa la función trigger('change'); y opcionalmente se vuelve a instanciar select2 en el elemento antes de cambiar el valor. Lo estoy haciendo pero sigue sin funcionar:

Tengo un botón para cada lista que muestra con un alert el valor actual de cada lista. La segunda lista a veces muestra el valor y otras no, la tercera siempre muestra 0...


  • El placeholder cambia (puedo ver el nombre de la ciudad/zona), pero al abrir la lista la opción seleccionada es la primera (valor 0).
  • En el caso de la tercera lista (zonas), a veces llega a no suceder absolutamente nada. Otras simplemente cambia el placeholder pero el valor sigue siendo 0.

Código (javascript) [Seleccionar]
$(function () {

   var province        = <?php echo $province?>,
       city            = <?php echo $city?>,
       zone            = <?php echo $zone?>;

   // province
   $('select[name="location[province]"]').val(province).change();

   // city
   content = '/get?op=1&id=' + province + '&list=1&admin=1';
   $('select[name="location[city]"]').load(content, function() {
       $(this).select2(); // reinstanciar el plugin
       $(this).val(city).trigger('change');
   });

   // zone
   content = '/get?op=1&id=' + city + '&list=2&admin=1';
   $('select[name="location[zone]"]').load(content, function() {
       $(this).select2();
       $(this).val(zone).trigger('change');
   });

});


Las tres variables están bien, abro el código fuente de la página y puedo ver que cada una tiene el número (entero).

¿Alguien sabe cual puede ser el problema?

Gracias!

MinusFour

Cita de: gAb1 en 22 Abril 2016, 23:16 PMLa primera lista al no ser dinamica simplemente uso change() para que select2 sepa que el valor ha cambiado y lo refleje (tanto el placeholder como el valor de la lista en sí).

¿Placeholder? Los selects no tienen placeholders.

Cita de: gAb1 en 22 Abril 2016, 23:16 PM
En el caso de las otras dos listas, es algo increible... cada vez que refresco (F5) la página, estas dos listas hacen algo distinto... no sé si es porque son dinamicas, pero no funciona.

¿Que no funciona?

No se que haga tu plugin (select2) o que acciones tengas registradas para change en tus selects.

gAb1

#2
Perdon, en otros foros (en ingles como stackoverflow) vi que se referian al nombre que muestra la lista como placeholder y me confundí. Yo me refiero a la opción seleccionada, en la lista aparece el nombre de la ciudad/zona seleccionada pero cuando abro la lista la opción seleccionada es la primera y el valor es 0, aunque se está mostrando el nombre... algo raro del plugin.

Select2 permite hacer muchisimas cosas, entre otras permite buscar y añadir nuevas opciones a la lista, así es como lo inicializo:

Código (javascript) [Seleccionar]
$('.location select').select2();
$('.location select[name="location[city]"], .location select[name="location[zone]"]').select2({
   tags: true,
   createTag: function (params) {
       return {
       id: params.term,
       text: params.term,
       newOption: true
       }
   },
   templateResult: function (data) {
       var $result = $("<span></span>");

       $result.text(data.text);

       if (data.newOption) {
       $result.append(" <em>(nuevo)</em>");
       }

       return $result;
   }
});


Pero creo que se trata de un fallo de la versión del select2 que no detecta correctamente el cambio de valor y no lo realiza. Abriré un issue en el repositorio.

EDITO: Vale ya he encontrado el problema. Al hacer el trigger change, se hacia tambien el on change que se encarga de popular las listas. Un peligroso conflicto de intereses, no volverá a pasar  ;D

EDITO 2: Dejo la respuesta por si alguien usa este plugin, hay que hacer que sea solo select2 el que active el change y no jquery: .trigger('change.select2'); de esta manera change() solo se produce en la instancia de select2.