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

165

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).

jquery

— oz.
source

352

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);

— gnarf
source

y a-t-il une meilleure façon de le faire? J'ai pensé qu'il scannerait tout le DOM en cherchant à correspondre à l'ID, mais comme je suis nouveau dans jQuery, j'ai pensé, faisons-le fonctionner et voyons ensuite s'il existe une meilleure façon de le faire. N'importe quel conseil sera apprécié.

— oz.

Oui - si vous pouvez attribuer une classe aux éléments que vous devez trouver, ce serait un sélecteur beaucoup plus rapide.

— gnarf

@gnarf ne sont pas les identifiants plus rapides?

— KBN

#an-idest plus rapide, mais *[id$=ends-with]est beaucoup plus lent, c'est ce que signifie "attribuer une classe à l'élément"

— gnarf

Et si j'ai plusieurs DropDownList ASP.net avec une valeur d'index sélectionnée différente?

— SearchForKnowledge

106

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);

— 4imble
source

30

Et à partir de jQuery 1.6, vous devriez l'utiliser, .prop('selectedIndex', 0);que cela .attr()fonctionne ou non :)

— gnarf

1

Correct, cela pourrait en fait ne pas fonctionner dans 1.7. voir la réponse acceptée: stackoverflow.com/questions/8010664/…

— 4imble

+1 pour l'addendum. Mon ancien code a été cassé à cause de ce problème

— BiLaL

11

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();

— PaulG
source

1

Merci pour votre réponse. Seule cette réponse fonctionne pour moi

— Viraj Dhamal

Toujours en 2015, je n'ai aucun problème avec prop('selectedIndex', ...);(testé avec Chrome et Firefox) pour changer la sélection.

— Lambart

2

Pour ce que cela vaut, il convient de souligner que vous faites différemment ici en déclenchant un changeévénement dans la liste déroulante, ce qui pourrait également être une solution / solution de contournement utile pour les personnes qui modifient la sélection en appelant prop('selectedIndex', ...), plutôt que val(...). Peut-être que le problème était que vous écoutiez un changeévénement, et c'est ce qui ne fonctionnait pas pour vous? Il est vrai que le simple fait de changer la proppropriété ne déclenchera aucun événement ...

— Lambart

9

j'utilise

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

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

— DJ
source

9

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>

— sathya
source

3

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'));

— MacAnthony
source

3

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');

— Jarrod
source

c'est une bien meilleure réponse.

— Ben Dehghan

1

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

le mettra à 0

— Josh Mein
source

1

Sélectionnez la 4e option

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

exemple sur jsfiddle

— dabar
source

2

solution valable ... pour un concours d'obfuscation de code! :)

— Lambart