web-dev-qa-db-fra.com

Choisir une option par défaut avec jQuery

J'ai une boîte de sélection avec des options et j'utilise jQuery "Chosen" sur une vue Zend. Ce plugin fonctionne bien.

Javascript:
$('#select_type').chosen();

Mon problème est que je dois sélectionner l'une des options lorsque la page se charge en fonction de la valeur de type_id. J'ai essayé ceci:

document.getElementById('select_type').value = '<?=$this->type_id?>';

Cela change sa valeur mais l'option n'est pas sélectionnée dans la requête JQuery choisie.

Des idées?

EDIT: L'option change avec succès en faisant ce que j'ai mentionné ci-dessus mais elle ne met pas à jour/ne change pas l'élément sélectionné dans le plugin jQuery "choisi". Ma question concerne la mise à jour de la valeur sélectionnée pour jQuery Chosen pas le HTML SELECT (ce que j'ai fait avec succès). Voici un lien vers le plugin jQuery Chosen

javascriptphpjqueryhtmljquery-selectors
26
ShayanK

Mettre à jour la liste avec JS

Après avoir exécuté:

document.getElementById('select_type').value = '<?=$this->type_id?>';

Pour la version choisie 1 et supérieure (plus récente)

Vous devez appeler:

$('#select_type').trigger('chosen:updated');

Tiré de la Documentation choisie :

Mise à jour dynamique choisie

Si vous avez besoin de mettre à jour les options de votre champ de sélection et que vous souhaitez que Chosen récupère les modifications, vous devrez déclencher l'événement "choisi: mis à jour" sur le champ. Chosen se reconstruira lui-même en fonction du contenu mis à jour.

$("#form_field").trigger("chosen:updated");

Voir le journal des modifications pour l'annonce de ce changement d'API.

Pour les versions choisies inférieures à 1 (plus ancienne)

Vous devez appeler:

$('#select_type').trigger('liszt:updated');

Tiré de la Documentation choisie :

Mise à jour dynamique choisie

Si vous avez besoin de mettre à jour les options de votre champ de sélection et que Chosen sélectionne les modifications, vous devrez déclencher l'événement "liszt: updated" sur le champ. Chosen se reconstruira lui-même en fonction du contenu mis à jour.

  • Version jQuery : $("#form_field").trigger("liszt:updated");
  • Version du prototype : Event.fire($("form_field"), "liszt:updated");

Définissez la valeur avant d'appeler Choisi

Au lieu de le faire à partir de JS, pourquoi ne pas simplement définir l'option sélectionnée dans le code HTML avant d'appeler le plugin Chosen avec JavaScript? Vous définissez la valeur à partir d'un morceau de PHP donc je ne vois pas pourquoi cela n'a pas pu être fait.

60
Treffynnon

Vous pouvez simplement définir les éléments corrects avec l'attribut sélectionné comme suit:

<select name="teams[]" data-placeholder="Chose an option:" 
        class="chzn-select" multiple tabindex="6">
    <option value=""></option>
    <option selected="selected">Dallas Cowboys</option>
    <option selected="selected">New York Giants</option>
    <option>Philadelphia Eagles</option>
    <option>Washington Redskins</option>
</select>

Les élus prendront soin de s'initialiser et d'afficher les deux choix présélectionnés.

6
Benjamin Crouzier

Essaye ça:

$("#select_type").val(<?=$this->type_id?>).trigger('change');

$('#select_type').trigger('liszt:updated');
3
vam

Essaye ça:

$('#select_type').val('<?=$this->type_id;?>'); // Select the value before .chosen();
$('#select_type').chosen();
2
phatskat
$('#select_type').val('<?=$this->type_id?>');

essayez-le

0
yapingchen