Comment puis-je définir la valeur d'un DropDownList à l'aide de jQuery?


349

Comme le dit la question, comment puis-je définir la valeur d'un contrôle DropDownList à l'aide de jQuery?

Réponses:


602
$("#mydropdownlist").val("thevalue");

assurez-vous simplement que la valeur dans les balises d'options correspond à la valeur de la méthode val.


J'ai un validateur de plage par rapport à une liste déroulante et je définis la valeur de la liste déroulante comme vous l'avez décrit ci-dessus, mais le validateur de plage ne cesse de me dire de sélectionner une valeur (lorsque la valeur sélectionnée est dans la plage). Veuillez voir ma question stackoverflow.com/questions/3165033/…
James

21
Cela ne déclenche pas l'événement "change".
AGamePlayer

4
Je voulais réitérer - assurez-vous que vous disposez de l'attribut "value", sinon cette méthode ne fonctionnera pas. (J'aidais quelqu'un qui m'a montré cela et je me demandais pourquoi il ne sélectionnait pas via le texte dans la liste déroulante.) Je voulais m'assurer que c'était clair.
JasCav

1
+1 J'ai dû appeler $("#mycontrolId").selectmenu('refresh');pour refléter les changements
VladL

informations détaillées sur ce lien htmlgoodies.com/beyond/javascript/…
Niamath

52

Si vous travaillez avec un index, vous pouvez définir l'index sélectionné directement avec .attr ():

$("#mydropdownlist").attr('selectedIndex', 0);

Cela le mettra à la première valeur de la liste déroulante.

Edit: La façon dont je l'ai fait ci-dessus fonctionnait auparavant. Mais il semble que ce ne soit plus le cas.

Mais comme Han le souligne si agréablement dans les commentaires, la bonne façon de procéder est:

$("#mydropdownlist").get(0).selectedIndex = index_here;

7
Maintenant, cela ne fonctionne pas du tout car la selectbalise n'a aucun attribut nommé selectedIndex. C'est une propriété de l'objet DOM à la place. Par conséquent, le code devrait être:$("#mydropdownlist").get(0).selectedIndex = index_here;
Han

5
$("#mydropdownlist").prop('selectedIndex', index_here); Fonctionne également.
numaroth

("#mydropdownlist"). get (0) .selectedIndex = index_here; cette façon était des travaux !! @
kasim

Excellent moyen de modifier la sélection dans la liste déroulante, Merci
Avtandil Kavrelishvili

puis-je sentir une agression passive dans la réponse
Dheeraj

49

Comme suggéré par @Nick Berardi, si votre valeur modifiée ne se reflète pas sur l'interface utilisateur, essayez:

$("#mydropdownlist").val("thevalue").change();

1
merci beaucoup, juste une ligne, soignée et utile pour déclencher également l'événement change () d'un SelectBox en utilisant jQuery et Laravel Forms.
WhySoSerious

Il s'agit de la seule réponse dans laquelle le changement est réellement apparu dans la liste déroulante. selectmenun'est pas défini dans ma version de jQuery, mais change()fait l'affaire.
Chad Hedgcock

Merci. C'était la seule façon dont cela fonctionnait pour moi (après avoir essayé tout le reste au-dessus de cela).
inspirednz

20

Essayez cette approche très simple:

/*make sure that value is included in the options value of the dropdownlist 
e.g. 
(<select><option value='CA'>California</option><option value='AK'>Alaska</option>      </select>)
*/

$('#mycontrolId').val(myvalue).attr("selected", "selected");

2
n'oubliez pas d'appeler$("#mycontrolId").selectmenu('refresh');
VladL

@VladL Alors tu veux dire $('#mycontrolId').selectmenu('refresh').val(myvalue).attr("selected", "selected");?
Dylan Czenski

9

Si votre liste déroulante est Asp.Net, le code ci-dessous fonctionnera correctement,

 $("#<%=DropDownName.ClientID%>")[0].selectedIndex=0;

Mais si votre DropDown est un menu déroulant HTML, ce code fonctionnera.

 $("#DropDownName")[0].selectedIndex=0;

5

Meilleure réponse à la question:

$("#comboboxid").val(yourvalue).trigger("chosen:updated");

par exemple:

$("#CityID").val(20).trigger("chosen:updated");

ou

$("#CityID").val("chicago").trigger("chosen:updated");

3

définir la valeur et mettre à jour l' événement de la liste déroulante

$("#id").val("1234").change();

2

Il y a plusieurs façons de procéder. En voici quelques uns:

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

OU

$('select').prop('selectedIndex', 3);

1
Votre profil indique que vous êtes associé au lien que vous avez inclus ici. Un lien vers quelque chose auquel vous êtes affilié (par exemple un produit ou un site Web) sans divulguer que l'affiliation dans votre message est considéré comme du spam sur Stack Exchange / Stack Overflow. Voir: Qu'est - ce qui signifie une "bonne" promotion personnelle? , quelques astuces et conseils sur l'autopromotion , Quelle est la définition exacte du "spam" pour Stack Overflow? et ce qui fait du spam .
Makyen

1

Je pense que cela peut aider:

    $.getJSON('<%= Url.Action("GetDepartment") %>', 
              { coDepartment: paramDepartment },
              function(data) {
                    $(".autoCompleteDepartment").empty();
                    $(".autoCompleteDepartment").append($("<option />").val(-1));
                    $.each(data, function() {
                        $(".autoCompleteDepartment").append($("<option />").val(this.CodDepartment).text(this.DepartmentName));
                    });
                    $(".autoCompleteDepartment").val(-1);                                       
              }  
             );

Si vous procédez ainsi, vous ajoutez un élément sans texte. Ainsi, lorsque vous cliquez sur de combo, il n'apparaît pas, mais la valeur -1 vous a ajouté une sélection ultérieure avec $ (". AutoCompleteDepartment"). Val (-1); vous permet de contrôler si le combo a une valeur valide.

J'espère que cela aide n'importe qui.

Désolé pour mon anglais.


1

Si vous avez juste besoin de définir la valeur d'une liste déroulante, la meilleure façon est

$("#ID").val("2");

Si vous devez déclencher un script après avoir mis à jour la valeur de la liste déroulante, comme si vous définissez un événement onChange sur la liste déroulante et que vous souhaitez l'exécuter après la mise à jour de la liste déroulante, vous devez utiliser comme ceci

$("#ID").val("2").change();

0

Voici une fonction faite pour définir rapidement l'option sélectionnée:

function SetSelected(elem, val){
        $('#'+elem+' option').each(function(i,d){
        //  console.log('searching match for '+ elem + '  ' + d.value + ' equal to '+ val);
            if($.trim(d.value).toLowerCase() == $.trim(val).toLowerCase()){
        //      console.log('found match for '+ elem + '  ' + d.value);
                $('#'+elem).prop('selectedIndex', i);
            }
        });
    }

Appelez cette fonction avec l'ID d'élément d'argument et la valeur sélectionnée; comme ça:

SetSelected('selectID','some option');

Il est utile lorsqu'il existe de nombreuses options de sélection à définir.


0

Dans le cas où vous chargez tout <options ....></options>par appel Ajax
Suivez ces étapes pour ce faire.

1). Créez une méthode distincte pour la valeur définie de la liste déroulante
pour Ex:

function set_ip_base_country(countryCode)
    $('#country').val(countryCode)
} 

2). Appelez cette méthode lorsque l'appel ajax réussit toutes les tâches d'ajout html sont terminées

Pour Ex:

success: function (doc) {
  .....
  .....
  $("#country").append('<option style="color:black;" value="' + key + '">'  +   value + '</option>')
  set_ip_base_country(ip_base_country)
}

0

Définir la drop-down selectedvaleur et mettre à jour les modifications

$("#PR2DistrictId option[value='@Model.PR2DistrictId']").attr("selected", true).trigger("chosen:updated")

Ici, nous définissons d'abord la valeur Modelet la mettons à jour sur le choix


0

// Format Html de la liste déroulante.

<select id="MyDropDownList">
<option value=test1 selected>test1</option>
<option value=test2>test2</option>
<option value=test3>test3</option>
<option value=test4>test4</option>

// Si vous voulez changer l'élément sélectionné en test2 en utilisant javascript. Essaye celui-là. // définir l'option suivante que vous souhaitez sélectionner

var NewOprionValue = "Test2"

        var RemoveSelected = $("#MyDropDownList")[0].innerHTML.replace('selected', '');
        var ChangeSelected = RemoveSelected.replace(NewOption, NewOption + 'selected>');
        $('#MyDropDownList').html(ChangeSelected);

0

L'utilisation de la réponse surlignée / vérifiée ci-dessus a fonctionné pour moi ... voici un petit aperçu. J'ai un peu triché pour obtenir l'URL, mais en gros, je définis l'URL dans le Javascript, puis je la configure via la réponse jquery ci-dessus:

<select id="select" onChange="window.location.href=this.value">
    <option value="">Select a task </option>
    <option value="http://127.0.0.1:5000/choose_form/1">Task 1</option>
    <option value="http://127.0.0.1:5000/choose_form/2">Task 2</option>
    <option value="http://127.0.0.1:5000/choose_form/3">Task 3</option>
    <option value="http://127.0.0.1:5000/choose_form/4">Task 4</option>
    <option value="http://127.0.0.1:5000/choose_form/5">Task 5</option>
    <option value="http://127.0.0.1:5000/choose_form/6">Task 6</option>
    <option value="http://127.0.0.1:5000/choose_form/7">Task 7</option>
    <option value="http://127.0.0.1:5000/choose_form/8">Task 8</option>
</select>
<script>
    var pathArray = window.location.pathname.split( '/' );
    var selectedItem = "http://127.0.0.1:5000/" + pathArray[1] + "/" + pathArray[2];
    var trimmedItem = selectedItem.trim();
    $("#select").val(trimmedItem);
</script>

0

Pour les personnes utilisant Bootstrap, utilisez $(#elementId').selectpicker('val','elementValue')plutôt $('#elementId').val('elementValue')que, car ce dernier ne met pas à jour la valeur dans l'interface utilisateur.

Remarque : Même la .change()fonction fonctionne, comme suggéré ci-dessus dans certaines réponses, mais elle déclenche la $('#elementId').change(function(){ //do something })fonction.

Il suffit de poster ceci pour les personnes référençant ce fil à l'avenir.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.