web-dev-qa-db-fra.com

comment actualiser le menu déroulant Select2 après avoir chargé différents contenus?

J'utilise Select2 dans une combinaison de menus déroulants. J'ai un menu pour "Pays" et un pour "Etats/Provinces". Selon le pays choisi, la liste déroulante "Etats/Provinces" change de contenu. Les états/provinces sont extraits avec ajax d'une base de données puis affichés comme suit:

$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>';

Jusqu'ici tout va bien. Toutes les provinces changent correctement, mais lors du chargement initial, le Select2 affiche "indéfini" pour la liste déroulante des états, même si je l’ai défini comme

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

Je suppose que cela pourrait être parce que lors du chargement, le pays sélectionné est "États-Unis" et il remplit une liste d'états, mais aucun d'entre eux n'est défini par défaut ou sélectionné. Existe-t-il un autre moyen de définir une valeur par défaut de sorte à ne pas afficher "Non défini"?

Et un autre problème (mais moins important) est que lorsque quelqu'un choisit "États-Unis", par exemple, puis "Arizona", si la personne devient alors "Canada" en tant que pays, l'état de "Arizona" reste toujours mais quand ouvrant la liste déroulante, les provinces du Canada sont sélectionnables. Est-il possible de rétablir temporairement la valeur par défaut lorsque quelqu'un sélectionne un autre pays, jusqu'à ce qu'une province soit à nouveau choisie?

Mon code de chargement est actuellement juste:

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

Sélectionnez 3. *

Veuillez consulter Mettez à jour les données de select2 sans reconstruire le contrôle car il peut s'agir d'un doublon. Une autre méthode consiste à détruire puis à recréer l'élément select2.

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

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

Si vous rencontrez des problèmes pour réinitialiser l’État/la région lors du changement de pays, effacez la valeur actuelle 

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

Vous pouvez consulter la documentation ici http://ivaynberg.github.io/select2/ qui décrit presque/toutes les fonctionnalités. Select2 prend en charge des événements tels que change qui peuvent être utilisés pour mettre à jour les listes déroulantes suivantes.

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

Sélectionnez 4. * Mise à jour

Vous pouvez maintenant mettre à jour les données/la liste sans reconstruire le contrôle en utilisant:

fooBarDropdown.select2({
    data: fromAccountData
});
41
SamV

Il est courant que d'autres composants écoutent l'événement change, ou que des gestionnaires d'événements personnalisés, associés à des effets secondaires, soient associés. Select2 n'a pas d'événement personnalisé (comme select2: update) qui peut être déclenché autrement que change . Vous pouvez vous fier à l'espacement de noms d'événements de jQuery pour limiter l'étendue à Select2 en déclenchant l'événement * change.select2.

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

select2 a le paramètre placeholder. Utilisez celui-là

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

Utilisez le script suivant après avoir ajouté votre sélection.

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

N'utilisez pas destroy.

1
Parth Patel