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

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

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

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

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;

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

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

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;

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

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

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

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

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

OU

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

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.

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

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.

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

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

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

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>

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.