web-dev-qa-db-fra.com

jQuery/Programmatically Sélectionnez une option dans la zone de sélection

J'utilise actuellement jQuery pour renvoyer des résultats JSON. Une fois ces résultats renvoyés, je les utilise pour pré-renseigner les champs de mon formulaire.

Cependant, j'ai besoin d'aide pour présélectionner des éléments dans une liste déroulante. Par exemple, j'ai une boîte de sélection (celle-ci est abrégée):

<select id="startTime">
<option value="14:00:00">2:00 pm</option>
<option value="15:00:00">3:00 pm</option>
<option value="16:00:00">4:00 pm</option>
<option value="17:00:00">5:00 pm</option>
<option value="18:00:00">6:00 pm</option>
</select>

Et si ma valeur JSON est:

 var start_time = data[0].start  // Let's say this is '17:00:00'

Comment puis-je, avec jQuery, choisir l'option avec la valeur '17: 00: 00 '?

 <option value="17:00:00" selected="selected">5:00 pm</option>
javascriptjqueryselect
45
Dodinas

mettre à jour:

Depuis jQuery 1.9, jQuery a mis à jour cette fonctionnalité. L'état "sélectionné" d'une option est en fait une propriété. C'est pourquoi jQuery a modifié cette méthode pour utiliser la méthode .prop (). La syntaxe est très similaire et facile à changer:

$('#startTime option[value=17:00:00]').prop('selected', true);

Voir http://api.jquery.com/prop/#entry-longdesc pour savoir pourquoi il doit passer true.

Ancien jQuery

$('#startTime option[value=17:00:00]').attr('selected', 'selected');

ou 

$('#startTime option[value='+ data[0].start +']').attr('selected', 'selected');
78
Sam Hasler
$('#startTime').val(start_time);
33
Corey Ballou

C'est juste $("#startTime").val(start_time);

10
Jacob Mattison

METTRE À JOUR

Depuis jQuery 1.9, jQuery a mis à jour cette fonctionnalité. L'état "sélectionné" d'une option est en fait une propriété. C'est pourquoi jQuery a modifié cette méthode pour utiliser la méthode .prop (). La syntaxe est très similaire et facile à changer:

$('option[value=17:00:00]').prop('selected', 'selected');
10
Joshua

Informations supplémentaires pour les utilisateurs mobiles jquery (1.3.0):

Voici un exemple similaire .

Si vous essayez l’exemple ci-dessus avec jquery 1.9.1 et jquery mobile 1.3.0, vous constaterez que cela ne fonctionne pas à moins d’ajouter un

$("#location_list").selectmenu("refresh");

Gardez cela à l'esprit lorsque vous utilisez jquery mobile. Cela m'a donné beaucoup de maux de tête

2
John Thompson

Pour une raison quelconque pour moi cela fonctionne comme ceci:

$('#startTime').val(''+data[0].start+'');
1
Adrian P.
var varValue="17:00:00";
$("#startTime").ready(function(){ 
   $("#startTime option[value='"+varValue+"']").prop("selected", "selected"); });

Fonctionne pour moi sur jQuery 1.10

1
antoshib