web-dev-qa-db-fra.com

Comment utiliser jQuery pour sélectionner une option de liste déroulante?

Je me demandais s’il était possible d’obtenir que jQuery sélectionne un <option>, disons le 4ème élément, dans une liste déroulante?

<select>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
</select>

Je veux que l'utilisateur clique sur un lien, puis que la boîte <select> change sa valeur, comme si l'utilisateur l'avait sélectionné en cliquant sur <option>.

javascriptjqueryhtmldrop-down-menuhtml-select
144
dotty

Que diriez-vous

$('select>option:eq(3)').attr('selected', true);

exemple à http://www.jsfiddle.net/gaby/CWvwn/

pour les versions modernes de jquery, vous devez utiliser .prop() au lieu de .attr()

$('select>option:eq(3)').prop('selected', true);

example at http://jsfiddle.net/gaby/CWvwn/1763/

174
Gabriele Petrioli

La solution:

$("#element-id").val('the value of the option');
142
Harold SOTA

Les éléments de sélection HTML ont une propriété selectedIndex sur laquelle vous pouvez écrire pour sélectionner une option particulière:

$('select').prop('selectedIndex', 3); // select 4th option

En utilisant du JavaScript simple, cela peut être réalisé par:

// use first select element
var el = document.getElementsByTagName('select')[0]; 
// assuming el is not null, select 4th option
el.selectedIndex = 3;
51
Ja͢ck

Le moyen le plus simple est la fonction val(value):

$('select').val(2);

Et pour obtenir la valeur sélectionnée, vous ne spécifiez aucun argument:

$('select').val();

De plus, si vous avez <option value="valueToSelect">...</option>, vous pouvez faire:

$('select').val("valueToSelect");

DÉMO

22
Ionică Bizău

Je le ferais de cette façon

 $("#idElement").val('optionValue').trigger('change');
21
franzisk

si vos options ont une valeur, vous pouvez le faire:

$('select').val("the-value-of-the-option-you-want-to-select");

'select' serait l'identifiant de votre sélection ou un sélecteur de classe. ou s'il n'y a qu'un seul choix, vous pouvez utiliser la balise telle qu'elle est dans l'exemple.

20
Victor

Utilisez le code suivant si vous souhaitez sélectionner une option avec une valeur spécifique:

$('select>option[value="' + value + '"]').prop('selected', true);
8
nlareu
 Try with the below codes. All should work. 
    $('select').val(2);
    $('select').prop('selectedIndex', 1);
    $('select>option[value="5"]').prop('selected', true);
    $('select>option:eq(3)').attr('selected', 'selected');
    $("select option:contains(COMMERCIAL)").attr('selected', true);
3
Mamun Rasid

Essaye ça:

$('#mySelectElement option')[0].selected = true;

Cordialement!

3
Nicolas Finelli

Avec '' élément, nous utilisons généralement l'attribut 'value'. Cela facilitera le réglage alors:

$('select').val('option-value');
3
Savaratkar

Je préfère nth-child () à eq () car il utilise l'indexation basée sur 1 plutôt que sur 0, ce qui est légèrement plus facile pour mon cerveau.

//selects the 2nd option
$('select>option:nth-child(2)').attr('selected', true);
3
Lee D

répondre avec identifiant:

$('#selectBoxId').find('option:eq(0)').attr('selected', true);
2
Javad Masoumi
 $('select>option:eq(3)').attr('selected', 'selected');

Une mise en garde ici est que si javascript surveille l’événement change de la sélection/option, vous devez ajouter .trigger('change') pour que le code devienne.

 $('select>option:eq(3)').attr('selected', 'selected').trigger('change');

car seul l'appel de .attr('selected', 'selected') ne déclenche pas l'événement

1
kanitw