php - data - select2 server

¿Cómo actualizar el menú desplegable de Select2 después de que ajax haya cargado contenido diferente?

Question

Estoy usando Select2 en una combinación de menús desplegables. Tengo un menú para "Países" y otro para "Estados / Provincias". Según el país elegido, el menú desplegable "Estados / Provincias" cambia de contenido. Los estados / provincias se extraen con ajax de una base de datos y luego se muestran de esta manera:

$display_output = ''<select style="width:350px;" tabindex="2" name="state" id="state" data-placeholder="Choose a Country..."> '';
$display_output .= ''<option value="" selected>Select a State</option> '';

while ($state_details = $this->fetch_array($sql_select_states))
{
    $display_output .= ''<option value="'' . $state_details[''id''] . ''" '' . (($selected_value == $state_details[''id'']) ? ''selected'' : ''''). ''>'' . $state_details[''s.name''] . ''</option>'';
}

$display_output .= ''</select>'';

Hasta ahora tan bueno. Todas las provincias cambian correctamente, sin embargo, cuando se cargan inicialmente, Select2 muestra "indefinido" para el desplegable de estados, aunque lo tengo configurado como

data-placeholder="Choose a Country..."

Supongo que podría ser porque al cargar, el país seleccionado es "Estados Unidos" y llena una lista de estados pero ninguno de ellos está predeterminado o seleccionado. ¿Hay alguna otra manera de definir un valor predeterminado para que no se muestre "No definido"?

Y otro problema (pero menos importante) es que cuando alguien elige "Estados Unidos" por ejemplo, y luego elige "Arizona", si la persona cambia a "Canadá" como país, el estado de "Arizona" aún permanece pero cuando abriendo el desplegable se seleccionan las provincias de Canadá. ¿Hay alguna manera de devolverlo al valor predeterminado temporalmente cuando alguien selecciona otro país, hasta que se elija nuevamente una provincia?

Mi código de carga es actualmente solo:

<script>
$(document).ready(function() { $("#state").select2(); });
</script>

Answer 1

Seleccione 3. *

Consulte Actualización de datos select2 sin reconstruir el control, ya que puede ser un duplicado. Otra forma es destruir y luego recrear el elemento select2.

$("#dropdown").select2("destroy");

$("#dropdown").select2();

Si tiene problemas para restablecer el cambio de estado / región en el país, intente borrar el valor actual con

$("#dropdown").select2("val", "");

Puede ver la documentación aquí http://ivaynberg.github.io/select2/ que describe casi todas las funciones. Select2 admite eventos como los change que se pueden usar para actualizar los menús desplegables posteriores.

$("#dropdown").on("change", function(e) {});

Seleccione 4. * Actualizar

Ahora puede actualizar los datos / lista sin reconstruir el control usando:

fooBarDropdown.select2({
    data: fromAccountData
});

Answer 2

Es común que otros componentes escuchen el evento de cambio , o que se conecten controladores de eventos personalizados que pueden tener efectos secundarios. Select2 no tiene un evento personalizado (como select2: update) que puede activarse de otra manera que no sea el cambio . Puede confiar en el espacio de nombres de eventos de jQuery para limitar el alcance a Select2 a través de la activación del evento * change.select2.

$(''#state'').trigger(''change.select2''); // Notify only Select2 of changes

Answer 3

Inicialice nuevamente select2 por nuevo id o clase como abajo

cuando se carga la pagina

$(".mynames").select2();

llamar de nuevo cuando llegó ajax después de la función ajax éxito

$(".names").select2();

Answer 4

Utilice el siguiente script después de añadir su selección.

$(''#state'').select2();

No uses destroy .

Answer 5

select2 tiene el parámetro de placeholder . Usa ese

$("#state").select2({
   placeholder: "Choose a Country"
 });