J'ai une zone de sélection dans une div qui est affichée par défaut et sur certains événements de clic, la propriété d'affichage de div est modifiée pour bloquer, mais le menu déroulant de sélection ne s'affiche pas et affiche un espace vide. J'ai appelé la méthode selected () pour la zone de sélection dans la même fonction déclenchée où je change la visibilité de div.
Voici le code de mon problème.
<div class="controls" style="display:none" id="Department-11">
<select multiple="" class="chosen-select1" id="form-field-select-4" data-placeholder="Choose a Department...">
<option value="Management">Senior Management</option>
<option value="Legal">Legal</option>
<option value="Operations">Operations</option>
<option value="Administration">Administration</option>
<option value="R&D">R&D</option>
<option value="Sales & Marketing">Sales & Marketing</option>
<option value="Finance">Finance</option>
<option value="Technology">Technology</option>
<option value="Customer Service">Customer Service</option>
<option value="Pro Services">Pro Services</option>
<option value="HR">HR</option>
<option value=""></option>
</select>
</div>
<a href="javascript:void(0);" onclick="showselect();">
Show select
</a>
Et le code JS est
function showselect() {
$('#Department-11').show();
$(".chosen-select1").chosen();
}
Ajouter css .chosen-container { width: 220px !important; }
Une autre solution consiste à définir la largeur de l'élément dans la méthode initiale, comme indiqué ci-dessous.
$(".chosen-select1").chosen({ width:"95%" });
C'est très simple. Dans votre Jquery, ajoutez cette ligne. Ça marche pour moi.
$ (". selected-select1"). val ("Légal"). trigger ("choisi: mis à jour");