En utilisant jQuery-choisi sur un formulaire sélectionnez peuplé par javascript

Question

J'essaie d'intégrer jquery-choisi jquery-chosen dans mon application.

Je deux commandes de sélection: lorsqu'un utilisateur sélectionne une option dans le premier, le deuxième jour dynamiquement (par jQuery) en fonction de la valeur sélectionnée de la première (sélectionne en cascade classique).

C'est dans le deuxième contrôle de sélection que je souhaite utiliser jquery-selected.

Voici mon js:

$(document).ready(function() { 
    $(".chzn-select").chosen(); 
}); 

$(document).ready(function() { 
    var geolocationRegionSelect = $("#geolocationRegionSelect");//first select control 
    geolocationRegionSelect.bind('change', function(event) { 
     $.get("/kadjoukor/geolocations/findDepartmentsByRegion?regionId="+$(this).val(), function(result){ 
      console.log(result);   
      var geolocationDepartmentSelect = $("#geolocationDepartmentSelect");//second select control 
      geolocationDepartmentSelect.empty(); 
      $.each(result, function() { 
       geolocationDepartmentSelect.append($("<option />").val(this.id).text(this.department)); 
      }); 
     }, 'json'); 
     $("#geolocationDepartmentSelect").trigger("liszt:updated"); 
    }); 
}); 

Voici le code html pour le second contrôle:

<div class="controls"> 
     <select id="geolocationDepartmentSelect" data-placeholder="Choose a department" multiple="multiple" class="chzn-select chzn-done"></select> 
    </div> 

J'ai remarqué que l'utilisation choisi jquery sur une usine de sélection statiquement population bien. C'est seulement avec mon select dynamiquement peuplé (le second) que je ne peux pas obtenir jquery-choisi pour travailler.

J'ai essayé d'utiliser la fonction de déclenchement comme indiqué dans la page choisie JQ-:

Mise à jour Chosen Dynamiquement

Si vous avez besoin de mettre à jour les options dans votre champ de sélection et que vous voulez Chosen Pour récupérer les modifications, vous devez déclencher l'événement "liszt: updated" sur le terrain. Choisi re-construire lui-même basé sur le contenu mis à jour.

Il ne fonctionne pas pour moi, malheureusement ...

EDIT: Je dois aussi mentionner que le contrôle choisi rend tout comme un multiple HTML brut sélectionnez lorsque la page est chargée.

Answer 1

J'ai changé le contrôle de sélection pour:

<select id="geolocationDepartmentSelect" data-placeholder="Choose a department" multiple="multiple" class="chzn-select"></select> 

et les js à:

$(".chzn-select").chosen({no_results_text: "No results matched"}); 

et

$(".chzn-select").trigger("liszt:updated"); 

et la question a disparu.