javascript - liste - selectionner valeur select jquery




Modifier la valeur sélectionnée d'une liste déroulante avec jQuery (10)

Je l'ai donc modifié pour qu'il s'exécute maintenant après 300 milisecondes en utilisant setTimeout. Ça semble fonctionner maintenant.

J'ai couru dans ceci plusieurs fois en chargeant des données d'un appel d'Ajax. Moi aussi j'utilise .NET, et il faut du temps pour m'adapter au clientId lorsque j'utilise le sélecteur jQuery. Pour corriger le problème que vous rencontrez et pour éviter d'avoir à ajouter une propriété setTimeout , vous pouvez simplement mettre " async: false " dans l'appel Ajax, et donner au DOM suffisamment de temps pour récupérer les objets que vous ajoutez au select. 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)
            );
        });
    }
});

J'ai une liste déroulante avec des valeurs connues. Ce que j'essaye de faire est de mettre la liste déroulante à une valeur particulière que je sais existe en utilisant jQuery. En utilisant du JavaScript courant, 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, j'ai besoin de faire ceci avec jQuery, parce que j'utilise une classe CSS pour mon sélecteur (stupide ID client ASP.NET ...).

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

Donc, il se trouve que j'ai eu raison la première fois avec:

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

Lorsque je mets une alerte juste au-dessus, ça marche bien, mais quand je retire l'alerte et la laisse tourner à pleine vitesse, j'obtiens l'erreur

Impossible de définir la propriété sélectionnée. Index invalide

Je ne sais pas si c'est un bug avec jQuery ou Internet Explorer 6 (je suppose que Internet Explorer 6), mais c'est terriblement ennuyeux.


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 d'une autre liste déroulante ... Donc d'abord j'ai mis dans une variable le selectIndex de mon premier menu déroulant.

var indiceDatos = $('#myidddl')[0].selectedIndex;

Ensuite, je sélectionne cet index sur 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 value. Donc, si vous n'avez pas de valeur unique pour chaque option, la méthode ci-dessus est la plus courte et 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 utiliserez ceci:

$("#dropDownList").prop("selectedIndex");

Pour définir l'index sélectionné d'une liste déroulante, vous devez utiliser ceci:

$("#dropDownList").prop("selectedIndex", 1);

Notez que la fonction prop () nécessite 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 affiche l'élément de la 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 pourraient exécuter:

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.


Comment chargez-vous les valeurs dans la liste déroulante ou déterminez quelle valeur sélectionner? Si vous utilisez Ajax, la raison pour laquelle vous avez besoin du délai avant que la sélection ne se produise peut être parce que les valeurs n'ont pas été chargées au moment où la ligne en question a été exécutée. Cela expliquerait également pourquoi cela a fonctionné lorsque vous avez placé une instruction d'alerte sur la ligne avant de définir le statut, car l'action d'alerte donnerait suffisamment de temps 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 mettre $("._statusDDL").val(2); dans votre fonction de rappel.

Ce serait un moyen plus fiable de gérer le problème, car vous pouviez être sûr que la méthode était exécutée lorsque les données étaient prêtes, même si cela prenait plus de 300 ms.


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 les contrôles ASP.NET dans jQuery comme ceci:

$.clientID("_statusDDL")

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'article 4 montrera comme "Selected" dans le navigateur et maintenant vous voulez changer la valeur en 3 et montrer "Item3" comme sélectionné au lieu de Item4.So selon les solutions ci-dessus, si vous utilisez

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

Vous verrez que l'élément 3 est sélectionné dans le navigateur.Mais lorsque vous traitez les données soit en PHP ou ASP, vous trouverez la valeur sélectionnée en tant que "4" .La raison en est, 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 en tant que "4" dans le langage côté serveur.

Donc ma solution finale à cet égard

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

EDIT : Ajoutez une guillemets 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 faire le nouveau comme sélectionné.

J'apprécierais les commentaires de programmeurs chevronnés comme @strager, @ y0mbo, @ISIK et d'autres


Juste une note - J'ai utilisé des sélecteurs génériques dans jQuery pour récupérer des éléments qui sont obscurcis par les ID CLient 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 * - ceci trouvera votre élément même si le nom est "ctl00 $ ctl00 $ ContentPlaceHolder1 $ ContentPlaceHolder1 $ MyDropDown"


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 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 faire 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 à l'intérieur de la parenthèse, ou simplement utiliser la variable que nous avons définie précédemment:

dataClsField.val(myValue);

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 des valeurs.

Ce comportement est dans les versions 1.2 et ultérieures de jQuery .

Vous voulez probablement ceci:

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

<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 = "Statique"

$('#DropUserType').val('1');




html-select