Définissez l'index sélectionné d'une liste déroulante à l'aide de jQuery
Comment puis-je 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 dynamiquement et puisque les identifiants sont modifiés lors de l'utilisation de formulaires Web, j'ai trouvé cela comme un travail 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é à 0 (zéro).
9 réponses
Tout d'abord-ce sélecteur est assez lent. Il va scanner 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 select elements 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 ceci, cela fonctionne pour moi et je le trouve personnellement plus facile à lire.
Cela définira l'index réel tout comme l'option numéro de réponse 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 le bug: http://dev.jquery.com/ticket/1474
Additif
Comme recommandé dans les commentaires utiliser:
$("select#elem").prop('selectedIndex', 0);
J'utilise
$('#elem').val('xyz');
Pour sélectionner l'élément option qui a value = ' xyz '
J'écris cette réponse en 2015, et pour une raison quelconque (probablement des versions plus anciennes de jQuery) aucune des autres réponses n'a fonctionné pour moi. Je veux dire, ils changent l'index sélectionné, mais il ne reflète pas réellement sur la liste déroulante réelle.
Voici une autre façon de changer l'index, et de le faire refléter dans la liste déroulante:
$('#mydropdown').val('first').change();
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 voulez récupérer la valeur de la première option dans l'élément select.
$("*[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