Modifier 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, c'est de définir la liste déroulante sur une valeur particulière que je sais exister à l'aide de jQuery . En utilisant du JavaScript normal , 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 ( ids de client ASP.NET stupides ...).

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 ?

Mise à jour

Donc, en fin de compte, je l'ai bien fait 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 s'exécuter à pleine vitesse, j'obtiens l'erreur

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 suppose Internet Explorer 6 ), mais c'est terriblement ennuyeux.

La documentation de jQuery indique:

[jQuery.val] vérifie ou sélectionne tous les boutons radio, cases à cocher et sélectionne les options correspondant à l'ensemble de valeurs.

Ce comportement est dans les jQueryversions 1.2et au-dessus.

Vous le souhaitez très probablement:

$("._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 des 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 restituera correctement l'ID de contrôle dans jQuery.

Essayez avec

$("._statusDDL").val("2");

et pas avec

$("._statusDDL").val(2);

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 () nécessite JQuery v1.6 ou ultérieure.

Voyons comment vous utiliseriez ces deux fonctions.

Supposons que vous disposiez d'une liste déroulante de 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 liste déroulante actuellement sélectionné et le remplace par le 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 JavaScript que ces boutons exécuteraient:

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.

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 d'abord, je mets dans une variable la selectIndexde ma première liste déroulante.

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 de données de l'option sélectionnée au lieu de l'attribut de valeur. 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 !!

Je sais que c'est une vieille question et 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 maintenant vous voulez changer la valeur comme 3 et afficher "Article3" comme sélectionné au lieu de Item4. Donc, selon les solutions ci-dessus, si vous utilisez

jQuery("#select_selector").val(3);

Vous verrez cet élément 3 comme sélectionné dans le navigateur. Mais lorsque vous traitez les données soit en php soit en asp, vous trouverez la valeur sélectionnée comme "4". La raison en est que votre 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 comme "4" dans la langue côté serveur.

DONC MA SOLUTION FINALE SUR CE REGARD

newselectedIndex = 3;
jQuery("#select_selector option:selected").removeAttr("selected");
jQuery("#select_selector option[value='"+newselectedIndex +"']").attr('selected', 'selected');  

EDIT : Ajoutez un guillemet simple autour de "+ newselectedIndex +" afin que la même fonctionnalité puisse être utilisée pour les valeurs non numériques.

Donc, ce que je fais est en fait, supprimé l'attribut sélectionné, puis faites le nouveau comme sélectionné.

J'apprécierais les commentaires à ce sujet de programmeurs seniors comme @strager, @ y0mbo, @ISIK et d'autres

Si nous avons une liste déroulante 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 le mettre dans une variable:

var dataClsField = $('select[title="Data Classification"]');

Ensuite, 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 dataClsField, faire une recherche myValueet le sélectionner en utilisant .prop():

dataClsField.find('option[value="'+ myValue +'"]').prop('selected', 'selected');

Ou, vous pouvez simplement utiliser .val(), mais votre sélecteur de .ne peut être utilisé que s'il correspond à une classe dans la liste déroulante, et vous devez utiliser des guillemets sur la valeur entre parenthèses, ou simplement utiliser la variable que nous avons définie précédemment:

dataClsField.val(myValue);

Je l'ai donc changé pour que maintenant il s'exécute après 300 millisecondes en utilisant setTimeout. Semble fonctionner maintenant.

J'ai rencontré cela plusieurs fois lors du chargement de données à partir d'un appel Ajax. Moi aussi, j'utilise .NET, et il faut du temps pour s'adapter au clientId lors de l'utilisation du sélecteur jQuery. Pour corriger le problème que vous rencontrez et éviter d'avoir à ajouter une setTimeoutpropriété, vous pouvez simplement mettre " async: false" dans l'appel Ajax, et cela donnera au DOM suffisamment de temps pour récupérer les objets que vous ajoutez à la sélection. 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 note - j'ai utilisé des sélecteurs génériques dans jQuery pour récupérer des éléments obscurcis par les ID clients ASP.NET - cela pourrait vous aider aussi:

<asp:DropDownList id="MyDropDown" runat="server" />

$("[id* = 'MyDropDown']").append("<option value='-1'>&nbsp;</option>"); //etc

Notez le caractère générique id * - cela trouvera votre élément même si le nom est "ctl00 $ ctl00 $ ContentPlaceHolder1 $ ContentPlaceHolder1 $ MyDropDown"

J'utilise une fonction d'extension pour obtenir les identifiants des clients, comme ceci:

$.extend({
    clientID: function(id) {
        return $("[id$='" + id + "']");
    }
});

Ensuite, vous pouvez appeler des contrôles ASP.NET dans jQuery comme ceci:

$.clientID("_statusDDL")

Une autre option consiste à définir le paramètre de contrôle ClientID = "Static" dans .net, puis vous pouvez accéder à l'objet dans JQuery par l'ID que vous définissez.

<asp:DropDownList id="MyDropDown" runat="server" />

Utilisez $("select[name$='MyDropDown']").val().

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 du délai avant que la sélection ne se produise pourrait être parce 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 mis une instruction d'alerte sur la ligne avant de définir l'état, car l'action d'alerte donnerait suffisamment de retard 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 la mettre $("._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 s'exécute lorsque les données sont prêtes, même si cela prend plus de 300 ms.

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

Dans mon cas, j'ai pu le faire fonctionner en utilisant la méthode .attr ().

$("._statusDDL").attr("selected", "");