Question 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'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, je dois le faire avec jQuery, parce que j'utilise une classe CSS pour mon sélecteur (stupide ASP.NET ID 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

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.


717
2018-01-31 19:39


origine


Réponses:


La documentation de jQuery États:

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

Ce comportement est en jQuery versions 1.2 et ci-dessus.

Vous voulez probablement ceci:

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

890
2018-01-31 19:43



Avec un champ caché, vous devez utiliser comme ceci:

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

ou

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

103
2017-10-09 10:21



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 rendra l'ID de contrôle correctement dans le jQuery.


28
2018-04-21 02:16



Essayez juste avec

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

et pas avec

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

21
2018-02-01 11:45



Ces solutions semblent supposer que chaque élément de vos listes déroulantes a un val () valeur relative à leur position dans la liste déroulante.

Les choses sont un peu plus compliquées si ce n'est pas le cas.

À lis l'index sélectionné d'une liste déroulante, vous utiliserez ceci:

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

À ensemble l'index sélectionné d'une liste déroulante, vous utiliserez ceci:

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

Notez que le soutenir() La fonctionnalité nécessite JQuery v1.6 ou version 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.


18
2018-03-07 11:51



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 drop-down.

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 !!


18
2018-05-17 17:24



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

MODIFIER: Ajoutez une guillemets 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, 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


12
2018-02-11 07:52



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 mettons dans dataClsField, faites une recherche pour myValue et faites-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 à l'intérieur de la parenthèse, ou simplement utiliser la variable que nous avons définie précédemment:

dataClsField.val(myValue);

5
2017-09-18 19:51



Donc je l'ai changé pour que maintenant   exécute après une durée de 300 millisecondes 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 éviter d'avoir à ajouter un setTimeout proprié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.

$.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)
            );
        });
    }
});

4
2018-06-21 04:59



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

3
2018-04-07 02:05