web-dev-qa-db-fra.com

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

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

jquerydrop-down-menu
331
flesh
$("#mydropdownlist").val("thevalue");

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

575
Nick Berardi

Si vous travaillez avec 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 de dépôt.

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

Mais comme Han le fait remarquer si agréablement dans les commentaires, la bonne façon de le faire est la suivante:

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

Comme suggéré par @Nick Berardi, si votre valeur modifiée n'est pas reflétée sur le front-end de l'interface utilisateur, essayez:

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

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

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

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

Mais si votre DropDown est une liste déroulante HTML, alors ce code fonctionnera.

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

Meilleure réponse pour la question:

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

par exemple:

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

ou

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

Il y a plusieurs façons de le faire. En voici quelques uns:

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

OR

$('select').prop('selectedIndex', 3);
2
Dilip Kumar Yadav

Essayez:

jQuery("#availability option:selected").val();

Ou pour obtenir le texte de l'option, utilisez text ():

jQuery("#availability option:selected").text();

Plus d'infos:

 http://api.jquery.com/val/
 http://api.jquery.com/text/

$(document).ready(function(){ 
  $('#button1').click(function(){ 
    alert($('#combo :selected').text());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="combo">
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
</select>
<input id="button1" type="button" value="Click!" />
1
Sangeet Shah

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, cela n'apparaît pas, mais la valeur -1 vous avez 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 ça aide n'importe qui.

Désolé pour mon anglais.

1
JapineJ

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 de l'élément argument et la valeur sélectionnée. comme ça:

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

C'est utile quand il y a beaucoup d'options à sélectionner.

0
vishwakarma09

// 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 u voulez sélectionner

var NewOprionValue = "Test2"

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

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

$("#id").val("1234").change();
0
Jignesh Joisar

Définir la valeur drop-downselected et mettre à jour les modifications

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

Ici, nous définissons d’abord la valeur de Model et nous la mettons à jour le cas échéant.

0
Deepak Tambe

Si vous chargez tous les <options ....></options> par appel Ajax
Suivez ces étapes pour le faire.

1). Créer une méthode distincte pour définir la valeur 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 a abouti à la fin de la tâche d'ajout HTML.

Pour Ex:

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

Utiliser la réponse surlignée/cochée ci-dessus a fonctionné pour moi ... voici un petit aperçu. J'ai un peu triché en obtenant l'URL, mais en gros, je définis l'URL dans le code Javascript, puis je le règle 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
user9915877