web-dev-qa-db-fra.com

jquery bootstrap selectpicker actualise les listes en fonction du choix précédent

J'ai trois listes déroulantes, une liste est remplie au chargement de la page et ne change pas. Les 2ème et 3ème listes peuvent changer en fonction de la sélection. Cette fonctionnalité fonctionne bien. 

J'ai essayé d'ajouter Bootstrap selectpicker aux sélecteurs et je peux voir que cela fonctionne. Malheureusement, les listes ne sont pas actualisées en fonction de la sélection. En fait, je pense "en coulisse" car je peux voir les requêtes être passées, mais rien ne se passe via le front-end.

Une partie du HTML:

<!-- SelectPicker -->
<link href='//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css' rel='stylesheet' type='text/css'>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

Les deux premiers DDL sont créés via php mais sont 

<select id='ddl_first_lookup' onchange='ajaxFirstOnChange(this.value)' value='' class='selectpicker'></option>
<select id='ddl_second_lookup' onchange='ajaxSecondOnChange(this.value)' class='selectpicker'>
<select id="ddl_third_lookup" onchange='ajaxThirdLookup(this.value)' class='selectpicker'></select>

J'ai le Javascript suivant:

$(document).ready(function() {  
  $(".selectpicker").selectpicker();
});

C’est à ce moment-là que j’ai découvert le problème, j’essaie de l’implémenter sans succès dans les fonctions de modification de ajax on, même si ce n’est pas sûr.

$('.selectpicker').selectpicker('refresh');

Je suis assez nouveau pour tout cela, alors j'aimerais de l'aide.

javascriptjqueryajaxtwitter-bootstrap
27
n34_panda

J'ai trouvé votre question après avoir eu le même problème. L'ajout de $('.selectpicker').selectpicker('refresh'); exactement après avoir ajouté des éléments à ma liste a fait le travail.
Donc vous devez probablement trouver le bon endroit pour le mettre. Peut-être dans la partie succès de votre appel ajax.

53
Athina

Ce que j'ai compris de mon expérience avec cela jusqu'à présent -

Si vous ajoutez dynamiquement des options au menu déroulant, vous devez appeler la fonction ci-dessous juste avant d'ajouter l'option.

$(".selectpicker").selectpicker();

Une fois que vous avez terminé d'ajouter des options, appelez la fonction ci-dessous (si vous utilisez ajax pour ajouter une option, mettez cette fonction dans la partie "succès", comme il vient d'être répondu à Athina)

$('.selectpicker').selectpicker('refresh');

Si vous êtes confronté à un problème étrange, comme afficher le menu déroulant, pas les données ou que le menu déroulant ne s'affiche pas correctement, vous devez avoir commis une erreur en plaçant la fonctionnalité et rien d’autre.

7
Rameshwar Vyevhare

Changer le nom de la classe selectpicker quand il est caché:

<select name="key" class="selectpicker_oncreate">

En rafraîchissant:

$('.selectpicker_oncreate').selectpicker('refresh');
2
Nadav

si la méthode d'actualisation ne vous aide pas, essayez d'ajouter un délai. 

    setTimeout(() => {
      jQuery('.selectpicker').selectpicker('refresh');
    }, 500);
1
Faiyaz Md Abdul

Dans mon Ajax successCallBack, j'essaie de manipuler une liste déroulante ayant l'id comme raisonCode basé sur dynamicId (valeur obtenue du serveur) comme ci-dessous:

$('#reasonCode option[value='+dynamicId+']').prop('selected', true);

mais malheureusement cela n'a pas fonctionné jusqu'à ce que j'ajoute une autre ligne après celle ci-dessous:

$('#reasonCode').selectpicker('refresh');
1
Rajdeep