Définir l'index sélectionné d'une liste déroulante à l'aide de jQuery

Comment définir l'index d'une liste déroulante dans jQuery si la façon dont je trouve le contrôle est la suivante:

$("*[id$='" + originalId + "']") 

Je le fais de cette façon parce que je crée des contrôles de manière dynamique et que les identifiants sont modifiés lors de l'utilisation de Web Forms, j'ai trouvé cela comme une solution de contournement pour me trouver des contrôles. Mais une fois que j'ai l'objet jQuery, je ne sais pas comment définir l'index sélectionné sur 0 (zéro).

Tout d'abord, ce sélecteur est assez lent. Il analysera chaque élément DOM à la recherche des identifiants. Ce sera moins un succès de performance si vous pouvez attribuer une classe à l'élément.

$(".myselect")

Pour répondre à votre question, il existe plusieurs façons de modifier la valeur de sélection des éléments dans jQuery

// sets selected index of a select box to the option with the value "0"
$("select#elem").val('0'); 

// sets selected index of a select box to the option with the value ""
$("select#elem").val(''); 

// sets selected index to first item using the DOM
$("select#elem")[0].selectedIndex = 0;

// sets selected index to first item using jQuery (can work on multiple elements)
$("select#elem").prop('selectedIndex', 0);

Je viens de trouver ça, ça marche pour moi et personnellement je trouve ça plus facile à lire.

Cela définira l'index réel comme la réponse numéro 3 de gnarf.

// sets selected index of a select box the actual index of 0 
$("select#elem").attr('selectedIndex', 0);

Cela ne fonctionnait pas mais maintenant ... voir bug: http://dev.jquery.com/ticket/1474

Addenda

Comme recommandé dans les commentaires, utilisez:

$("select#elem").prop('selectedIndex', 0);

J'écris cette réponse en 2015, et pour une raison quelconque (probablement les anciennes versions de jQuery), aucune des autres réponses n'a fonctionné pour moi. Je veux dire, ils changent l'index sélectionné, mais cela ne reflète pas réellement la liste déroulante réelle.

Voici une autre façon de modifier l'index et de le refléter dans la liste déroulante:

$('#mydropdown').val('first').change();

j'utilise

$('#elem').val('xyz');

pour sélectionner l'élément d'option qui a la valeur = 'xyz'

Code JQuery:

$("#sel_status").prop('selectedIndex',1);

Code Jsp:

Status:
<select name="sel_status"
    id="sel_status">
    <option value="1">-Status-</option>
    <option>ALL</option>
    <option>SENT</option>
    <option>RECEIVED</option>
    <option>DEACTIVE</option>
</select>

Vous souhaitez saisir la valeur de la première option dans l'élément de sélection.

$("*[id$='" + originalId + "']").val($("*[id$='" + originalId + "'] option:first").attr('value'));

Pour sélectionner la 2ème option

$('#your-select-box-id :nth-child(2)').prop('selected', true);

Ici, nous ajoutons le `trigger ('change') pour déclencher l'événement.

$('#your-select-box-id :nth-child(2)').prop('selected', true).trigger('change');

$("[id$='" + originalId + "']").val("0 index value");

le mettra à 0

Sélectionnez la 4e option

$('#select').val($('#select option').eq(3).val());

exemple sur jsfiddle