web-dev-qa-db-fra.com

Définition de l'attribut sélectionné dans une liste de sélection à l'aide de jQuery

J'ai le code HTML suivant:

<select id="dropdown">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

J'ai la chaîne "B" donc je veux définir l'attribut selected dessus pour que ce soit:

<select id="dropdown">
    <option>A</option>
    <option selected="selected">B</option>
    <option>C</option>
</select>

Comment ferais-je cela dans jQuery?

jqueryhtmlhtml-select
49
Rupert

Si cela ne vous dérange pas de modifier un peu votre code HTML pour inclure l'attribut value des options, vous pouvez réduire considérablement le code nécessaire pour ce faire:

<option>B</option>

à

<option value="B">B</option>

Cela vous sera utile si vous voulez faire quelque chose comme:

<option value="IL">Illinois</option>

Avec cela, la suite jQuery fera le changement:

$("select option[value='B']").attr("selected","selected");

Si vous décidez non d'inclure l'utilisation de l'attribut value, vous devrez parcourir chaque option et vérifier manuellement sa valeur:

$("select option").each(function(){
  if ($(this).text() == "B")
    $(this).attr("selected","selected");
});
119
Sampson
<select id="cars">
<option value='volvo'>volvo</option>
<option value='bmw'>bmw</option>
<option value='fiat'>fiat</option>
</select>

var make = "fiat";

$("#cars option[value='" + make + "']").attr("selected","selected");
11
Darren Rose

Si vous utilisez JQuery, depuis la version 1.6, vous devez utiliser la méthode .prop ():

$('select option:nth(1)').prop("selected","selected");
5
G.Busato

Je parcourais les options, comparant le texte à ce que je souhaitais sélectionner, puis définissais l'attribut sélectionné sur cette option. Une fois que vous avez trouvé le bon, terminez l'itération (sauf si vous avez une sélection multiple).

 $('#dropdown').find('option').each( function() {
      var $this = $(this);
      if ($this.text() == 'B') {
         $this.attr('selected','selected');
         return false;
      }
 });
3
tvanfosson

Vous pouvez suivre la stratégie .selectedIndex de danielrmt, mais déterminer l'index en fonction du texte dans les balises d'option comme ceci:

$('#dropdown')[0].selectedIndex = $('#dropdown option').toArray().map(jQuery.text).indexOf('B');

Cela fonctionne sur le code HTML d'origine sans utiliser d'attributs de valeur.

2
Derek Veit

Vous pouvez utiliser du DOM pur. Voir http://www.w3schools.com/htmldom/prop_select_selectedindex.asp

document.getElementById('dropdown').selectedIndex = 1;

mais jQuery peut aider:

$('#dropdown').selectedIndex = 1;
1
danielrmt
$('#select_id option:eq(0)').prop('selected', 'selected');

c'est bon

1
Mikulasche

Cela peut être une solution

$(document).on('change', 'select', function () {
            var value = $(this).val();
            $(this).find('option[value="' + value + '"]').attr("selected", "selected");
        })
1
Regan

Code:

var select = function(dropdown, selectedValue) {
    var options = $(dropdown).find("option");
    var matches = $.grep(options,
        function(n) { return $(n).text() == selectedValue; });
    $(matches).attr("selected", "selected");
};

Exemple:

select("#dropdown", "B");
1
Joe Chung

Quelque chose dans le sens de ...

$('select option:nth(1)').attr("selected","selected");
0
David