Changer la valeur sélectionnée d'une liste déroulante avec jQuery
J'ai une liste déroulante avec des valeurs connues. Ce que j'essaie de faire est de définir la liste déroulante sur une valeur particulière qui existe à l'aide de jQuery. En utilisant JavaScript, je ferais quelque chose comme:
ddl = document.getElementById("ID of element goes here");
ddl.value = 2; // 2 being the value I want to set it too.
Cependant, je dois le faire avec jQuery, car j'utilise une classe CSS pour mon sélecteur (stupid ASP.NET identifiants client ...).
Voici quelques choses que j'ai essayées:
$("._statusDDL").val(2); // Doesn't find 2 as a value.
$("._statusDDL").children("option").val(2) // Also failed.
Comment puis-je le faire avec jQuery?
Mettre à jour
En fin de compte, j'ai eu raison dès la première fois avec:
$("._statusDDL").val(2);
Lorsque je mets une alerte juste au-dessus, cela fonctionne bien, mais lorsque je supprime l'alerte et la laisse fonctionner à toute vitesse, le message d'erreur s'affiche.
Impossible de définir la propriété sélectionnée. Index non valide
Je ne sais pas si c'est un bogue avec jQuery ou Internet Explorer 6 (je devine Internet Explorer 6), mais c'est terriblement ennuyant.
La documentation de jQuery déclare:
[jQuery.val] vérifie ou sélectionne, tous les boutons radio, les cases à cocher et sélectionnez les options correspondant à l'ensemble de valeurs.
Ce comportement est dans jQuery versions 1.2 et supérieur.
Vous voulez probablement ceci:
$("._statusDDL").val('2');
Avec un champ caché, vous devez utiliser comme ceci:
$("._statusDDL").val(2);
$("._statusDDL").change();
ou
$("._statusDDL").val(2).change();
Juste un FYI, vous n'avez pas besoin d'utiliser les classes CSS pour accomplir cela.
Vous pouvez écrire la ligne de code suivante pour obtenir le nom de contrôle correct sur le client:
$("#<%= statusDDL.ClientID %>").val("2");
ASP.NET rendra l'ID de contrôle correctement dans jQuery.
Juste essayer avec
$("._statusDDL").val("2");
et pas avec
$("._statusDDL").val(2);
Après avoir examiné certaines solutions, cela a fonctionné pour moi.
J'ai une liste déroulante avec quelques valeurs et je veux sélectionner la même valeur dans une autre liste déroulante ... Alors, je mets d'abord dans une variable le selectIndex de mon premier menu déroulant.
var indiceDatos = $('#myidddl')[0].selectedIndex;
Ensuite, je sélectionne cet index dans ma deuxième liste déroulante.
$('#myidddl2')[0].selectedIndex = indiceDatos;
Remarque:
Je suppose que c'est la solution la plus courte, fiable, générale et élégante.
Parce que dans mon cas, j'utilise l'attribut data de l'option sélectionnée au lieu de l'attribut value . Donc, si vous n'avez pas de valeur unique pour chaque option, la méthode ci-dessus est la plus courte et la plus douce !!
Ces solutions semblent supposer que chaque élément de vos listes déroulantes a une valeur val () relative à leur position dans la liste déroulante.
Les choses sont un peu plus compliquées si ce n'est pas le cas.
Pour lire l'index sélectionné d'une liste déroulante, vous utiliseriez ceci:
$("#dropDownList").prop("selectedIndex");
Pour définir l'index sélectionné d'une liste déroulante, vous utiliseriez ceci:
$("#dropDownList").prop("selectedIndex", 1);
Notez que la fonctionnalité prop () requiert JQuery version 1.6 ou ultérieure.
Voyons comment vous utiliseriez ces deux fonctions.
Supposons que vous ayez une liste déroulante des noms de mois.
<select id="listOfMonths">
<option id="JAN">January</option>
<option id="FEB">February</option>
<option id="MAR">March</option>
</select>
Vous pouvez ajouter un bouton "Mois précédent" et "Mois suivant" qui examine l'élément de la liste déroulante actuellement sélectionné et le modifie au mois précédent/suivant:
<button id="btnPrevMonth" title="Prev" onclick="btnPrevMonth_Click();return false;" />
<button id="btnNextMonth" title="Next" onclick="btnNextMonth_Click();return false;" />
Et voici le code JavaScript que ces boutons utiliseraient:
function btnPrevMonth_Click() {
var selectedIndex = $("#listOfMonths").prop("selectedIndex");
if (selectedIndex > 0) {
$("#listOfMonths").prop("selectedIndex", selectedIndex - 1);
}
}
function btnNextMonth_Click() {
// Note: the JQuery "prop" function requires JQuery v1.6 or later
var selectedIndex = $("#listOfMonths").prop("selectedIndex");
var itemsInDropDownList = $("#listOfMonths option").length;
// If we're not already selecting the last item in the drop down list, then increment the SelectedIndex
if (selectedIndex < (itemsInDropDownList - 1)) {
$("#listOfMonths").prop("selectedIndex", selectedIndex + 1);
}
}
Le site suivant est également utile pour montrer comment remplir une liste déroulante avec des données JSON:
http://mikesknowledgebase.com/pages/Services/WebServices-Page8.htm
Phew !!
J'espère que cela t'aides.
Je sais que cette question est ancienne et que les solutions ci-dessus fonctionnent bien, sauf dans certains cas.
Comme
<select id="select_selector">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3">Item3</option>
<option value="4" selected="selected">Item4</option>
<option value="5">Item5</option>
</select>
Donc, l'élément 4 apparaîtra comme "Sélectionné" dans le navigateur et vous voulez maintenant changer la valeur en 3 et afficher "Item3" comme sélectionné au lieu de Item4.So selon les solutions ci-dessus, si vous utilisez
jQuery("#select_selector").val(3);
Vous verrez cet élément 3 sélectionné dans le navigateur. Mais lorsque vous traitez les données en php ou en asp, vous trouverez la valeur sélectionnée sous la forme "4". La raison en est que votre code html ressemblera à ceci.
<select id="select_selector">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3" selected="selected">Item3</option>
<option value="4" selected="selected">Item4</option>
<option value="5">Item5</option>
</select>
et il obtient la dernière valeur sous la forme "4" dans plusieurs langues.
SO Ma solution finale à ce sujet
newselectedIndex = 3;
jQuery("#select_selector option:selected").removeAttr("selected");
jQuery("#select_selector option[value='"+newselectedIndex +"']").attr('selected', 'selected');
EDIT: Ajouter un guillemet simple autour de "+ newselectedIndex +" afin que la même fonctionnalité puisse être utilisée pour des valeurs non numériques.
Donc, ce que je fais est en fait, enlevé l'attribut sélectionné et fais ensuite le nouvel attribut sélectionné.
J'apprécierais les commentaires à ce sujet des programmeurs expérimentés tels que @strager, @ y0mbo, @ISIK et autres
Si nous avons un menu déroulant avec un titre de "Classification des données":
<select title="Data Classification">
<option value="Top Secret">Top Secret</option>
<option value="Secret">Secret</option>
<option value="Confidential">Confidential</option>
</select>
Nous pouvons l'obtenir dans une variable:
var dataClsField = $('select[title="Data Classification"]');
Puis mettez dans une autre variable la valeur que nous voulons que la liste déroulante ait:
var myValue = "Top Secret"; // this would have been "2" in your example
Ensuite, nous pouvons utiliser le champ que nous avons mis dans dataClsField, faire une recherche pour myValue et le sélectionner à l’aide de .prop():
dataClsField.find('option[value="'+ myValue +'"]').prop('selected', 'selected');
Ou bien, vous pouvez simplement utiliser .val(), mais votre sélecteur . ne peut être utilisé que s'il correspond à une classe du menu déroulant et que vous devez utiliser des guillemets sur la valeur entre parenthèses ou simplement utiliser la variable définie précédemment
dataClsField.val(myValue);
Alors je l'ai changé pour que maintenant s'exécute après 300 millisecondes à l'aide de setTimeout. Semble travailler maintenant.
Je me suis souvent heurté à cela lors du chargement de données à partir d'un appel Ajax. J'utilise moi aussi .NET, et il faut du temps pour s'adapter à clientId avec le sélecteur jQuery. Pour corriger le problème rencontré et éviter de devoir ajouter une propriété setTimeout, vous pouvez simplement mettre "async: false" dans l'appel Ajax. Le DOM aura ainsi suffisamment de temps pour récupérer les objets que vous ajoutez sélectionner. Un petit échantillon ci-dessous:
$.ajax({
type: "POST",
url: document.URL + '/PageList',
data: "{}",
async: false,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var pages = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
$('#locPage' + locId).find('option').remove();
$.each(pages, function () {
$('#locPage' + locId).append(
$('<option></option>').val(this.PageId).html(this.Name)
);
});
}
});
Juste une remarque - jQuery utilise des sélecteurs de caractère générique pour récupérer les éléments masqués par les ID de client ASP.NET. Cela pourrait également vous aider:
<asp:DropDownList id="MyDropDown" runat="server" />
$("[id* = 'MyDropDown']").append("<option value='-1'> </option>"); //etc
Notez le caractère générique id *. Votre élément sera trouvé même si son nom est "ctl00 $ ctl00 $ ContentPlaceHolder1 $ ContentPlaceHolder1 $ MyDropDown"
Une autre option consiste à définir le paramètre de contrôle ClientID = "Static" dans .net pour pouvoir accéder à l'objet dans JQuery à l'aide de l'ID que vous avez défini.
J'utilise une fonction d'extension pour obtenir les identifiants client, comme ceci:
$.extend({
clientID: function(id) {
return $("[id$='" + id + "']");
}
});
Ensuite, vous pouvez appeler les contrôles ASP.NET dans jQuery comme suit:
$.clientID("_statusDDL")
<asp:DropDownList id="MyDropDown" runat="server" />
Utilisez $("select[name$='MyDropDown']").val().
<asp:DropDownList ID="DropUserType" ClientIDMode="Static" runat="server">
<asp:ListItem Value="1" Text="aaa"></asp:ListItem>
<asp:ListItem Value="2" Text="bbb"></asp:ListItem>
</asp:DropDownList>
ClientIDMode = "Static"
$('#DropUserType').val('1');
Comment chargez-vous les valeurs dans la liste déroulante ou déterminez-vous la valeur à sélectionner? Si vous faites cela en utilisant Ajax, la raison pour laquelle vous avez besoin de délai avant la sélection peut être due au fait que les valeurs n'ont pas été chargées au moment de l'exécution de la ligne en question. Cela expliquerait également pourquoi cela a fonctionné lorsque vous avez placé une déclaration d'alerte sur la ligne avant de définir le statut, car l'action d'alerte entraînerait un délai suffisant pour le chargement des données.
Si vous utilisez l'une des méthodes Ajax de jQuery, vous pouvez spécifier une fonction de rappel, puis insérer $("._statusDDL").val(2); dans votre fonction de rappel.
Ce serait un moyen plus fiable de gérer le problème, car vous pouvez être sûr que la méthode est exécutée lorsque les données sont prêtes, même si cela prend plus de 300 ms.
Dans mon cas, je pouvais le faire fonctionner en utilisant la méthode .attr ().
$("._statusDDL").attr("selected", "");