web-dev-qa-db-fra.com

jQuery Set Select Index

J'ai une boite de sélection:

<select id="selectBox">
  <option value="0">Number 0</option>
  <option value="1">Number 1</option>
  <option value="2">Number 2</option>
  <option value="3">Number 3</option>
  <option value="4">Number 4</option>
  <option value="5">Number 5</option>
  <option value="6">Number 6</option>
  <option value="7">Number 7</option>
</select>

J'aimerais définir l'une des options comme "sélectionnée" en fonction de l'index sélectionné.

Par exemple, si j'essaie de définir le "numéro 3", j'essaie ceci:

$('#selectBox')[3].attr('selected', 'selected');

Mais ça ne marche pas. Comment définir une option en fonction de son index à l'aide de jQuery?

Merci!

jqueryjquery-selectors
245
Dodinas

NOTE: la réponse dépend de jQuery 1.6.1+

$('#selectBox :nth-child(4)').prop('selected', true); // To select via index
$('#selectBox option:eq(3)').prop('selected', true);  // To select via value

Merci pour le commentaire, .get ne fonctionnera pas car il retourne un élément DOM, pas un élément jQuery. Gardez à l'esprit que la fonction .eq peut également être utilisée en dehors du sélecteur si vous préférez.

$('#selectBox option').eq(3).prop('selected', true);

Vous pouvez également être plus concis/lisible si vous souhaitez utiliser value, au lieu de choisir un index spécifique:

$("#selectBox").val("3");

Remarque: .val(3) fonctionne également pour cet exemple, mais les valeurs non numériques doivent être des chaînes. J'ai donc choisi une chaîne pour la cohérence. 
(par exemple, <option value="hello">Number3</option> vous oblige à utiliser .val("hello"))

429
Marc

Cela peut aussi être utile, alors je pensais l’ajouter ici.

Si vous souhaitez sélectionner une valeur basée sur la valeur de l'élément et non sur l'index de cet élément, vous pouvez procéder comme suit:

Votre liste de sélection:

<select id="selectBox">
    <option value="A">Number 0</option>
    <option value="B">Number 1</option>
    <option value="C">Number 2</option>
    <option value="D">Number 3</option>
    <option value="E">Number 4</option>
    <option value="F">Number 5</option>
    <option value="G">Number 6</option>
    <option value="H">Number 7</option>
</select>

Le jquery:

$('#selectBox option[value=C]').attr('selected', 'selected');

$('#selectBox option[value=C]').prop('selected', true);

L'élément sélectionné serait "Numéro 2" maintenant.

114
dnoxs

Essayez ceci à la place:

$("#selectBox").val(3);

aussi, voyez si cela vous aide: 

http://elegantcode.com/2009/07/01/jquery-playing-with-select-dropdownlistcombobox/

62
Chris Brandsma

Encore plus simple:

$('#selectBox option')[3].selected = true;
44
sean
# Set element with index
$("#select option:eq(2)").attr("selected", "selected");

# Set element by text
$("#select").val("option Text").attr("selected", "selected");

lorsque vous voulez sélectionner avec les meilleurs moyens de sélectionner un ensemble, vous pouvez utiliser
$('#select option').removeAttr('selected'); pour supprimer les sélections précédentes. 

# Set element by value
$("#select").val("2");

# Get selected text
$("#select").children("option:selected").text();  # use attr() for get attributes
$("#select option:selected").text(); # use attr() for get attributes 

# Get selected value
$("#select option:selected").val();
$("#select").children("option:selected").val();
$("#select option:selected").prevAll().size();
$("option:selected",this).val();

# Get selected index
$("#select option:selected").index();
$("#select option").index($("#select option:selected"));

# Select First Option
$("#select option:first");

# Select Last Item
$("#select option:last").remove();


# Replace item with new one
$("#select option:eq(1)").replaceWith("<option value='2'>new option</option>");

# Remove an item
$("#select option:eq(0)").remove();
16
Mohamad Rostami

Il est important de comprendre que val() pour un élément select renvoie la valeur de l'option sélectionnée, mais pas le nombre d'élément comme le fait selectedIndex en javascript.

Pour sélectionner l'option avec value="7", vous pouvez simplement utiliser:

$('#selectBox').val(7); //this will select the option with value 7.

Pour désélectionner l'option, utilisez un tableau vide:

$('#selectBox').val([]); //this is the best way to deselect the options

Et bien sûr, vous pouvez sélectionner plusieurs options *:

$('#selectBox').val([1,4,7]); //will select options with values 1,4 and 7

* Cependant, pour sélectionner plusieurs options, votre élément <select> doit avoir un attribut MULTIPLE, sinon il ne fonctionnera pas.

11
Anonymous

J'ai toujours eu des problèmes avec prop ('sélectionné'), les éléments suivants ont toujours fonctionné pour moi:

//first remove the current value
$("#selectBox").children().removeAttr("selected");
$("#selectBox").children().eq(index).attr('selected', 'selected');
9
hellojebus

Essaye ça:

$('select#mySelect').prop('selectedIndex', optionIndex);

Eventuellement, déclenchez un événement .change:

$('select#mySelect').prop('selectedIndex', optionIndex).change();
8
NicolasBernier

J'espère que cela pourrait aider trop

$('#selectBox option[value="3"]').attr('selected', true);
6
Andrew

Dans 1.4.4, vous obtenez une erreur: $ ("# selectBox option") [3] .attr n’est pas une fonction

Cela fonctionne: $('#name option:eq(idx)').attr('selected', true);

Où #name est select id et idx est la valeur d'option que vous souhaitez sélectionner.

4
mwf

Le javascript pur selectedIndex est la bonne façon de faire, car c'est du javascript pur qui fonctionne sur plusieurs navigateurs:

$('#selectBox')[0].selectedIndex=4;

Voici une démo de jsfiddle avec deux listes déroulantes utilisant l’une pour définir l’autre:

<select onchange="$('#selectBox')[0].selectedIndex=this.selectedIndex">
  <option>0</option>
  <option>1</option>
  <option>2</option>
</select>

<select id="selectBox">
  <option value="0">Number 0</option>
  <option value="1">Number 1</option>
  <option value="2">Number 2</option>
</select>

Vous pouvez également appeler cela avant de changer le selectedIndex si ce que vous voulez est l'attribut "selected" sur la balise d'option ( voici le violon ):

$('#selectBox option').removeAttr('selected')
   .eq(this.selectedIndex).attr('selected','selected');
4
jacmkno

sélectionnez la 3ème option

$('#selectBox').val($('#selectBox option').eq(2).val());

Exemple sur jsfiddle

4
dabar

Pour clarifier les réponses de Marc et John Kugelman, vous pouvez utiliser:

$('#selectBox option').eq(3).attr('selected', 'selected')

get() ne fonctionnera pas s'il est utilisé de la manière spécifiée car il récupère l'objet DOM et non un objet jQuery. La solution suivante ne fonctionnera donc pas:

$('#selectBox option').get(3).attr('selected', 'selected')

eq() obtient les filtres du jeu jQuery sur celui de l'élément avec l'index spécifié. C'est plus clair que $($('#selectBox option').get(3)). Ce n'est pas si efficace que ça. $($('#selectBox option')[3]) est plus efficace (voir scénario de test ).

Vous n'avez cependant pas besoin de l'objet jQuery. Ça fera l'affaire:

$('#selectBox option')[3].selected = true;

http://api.jquery.com/get/

http://api.jquery.com/eq/

Un autre point extrêmement important:

L'attribut "sélectionné" n'indique pas comment vous spécifiez un bouton d'option sélectionné (au moins dans Firefox et Chrome). Utilisez l'attribut "vérifié":

$('#selectBox option')[3].checked = true;

Il en va de même pour les cases à cocher.

4
Spycho

NB: 

$('#selectBox option')[3].attr('selected', 'selected')

est incorrect, la déférence du tableau vous obtient l'objet dom, pas un objet jquery, donc il échouera avec une erreur TypeError, par exemple dans FF avec: "$ ('option # selectBox') [3] .attr () n'est pas une fonction . "

3
slh777
//funcion para seleccionar por el text del select
var text = '';
var canal = ($("#name_canal").val()).split(' ');
$('#id_empresa option').each(function(i, option) {
        text = $('#id_empresa option:eq('+i+')').text();
        if(text.toLowerCase() == canal[0].toLowerCase()){
            $('#id_empresa option:eq('+i+')').attr('selected', true);
        }
    });
2
andrwsv

J'ai besoin d'une solution qui n'a pas de valeurs codées en dur dans le fichier js; en utilisant selectedIndex. La plupart des solutions proposées ont échoué sur un navigateur. Cela semble fonctionner dans FF10 et IE8 (quelqu'un d'autre peut-il tester dans d'autres versions)

$("#selectBox").get(0).selectedIndex = 1;
1
Jean-Marc

J'ai rencontré le même problème. Vous devez d’abord parcourir les événements (c’est-à-dire quel événement se produit en premier).

Par exemple: 

Le Premier événement génère une boîte de sélection avec des options. 

Le Second événement est en train de sélectionner l’option par défaut en utilisant une fonction telle que val (), etc.

Vous devez vous assurer que le Deuxième événement se produira après le Premier événement .

Pour cela, prenez deux fonctions, disons generateSelectbox () (pour générer une sélection) et selectDefaultOption ()

Vous devez vous assurer que selectDefaultOption () ne doit être appelé qu'après l'exécution de generateSelectbox ()

1
Mani

Vous pouvez également initialiser plusieurs valeurs si votre sélection est un multiple:

$('#selectBox').val(['A', 'B', 'C']);
1
Frank Glück

Sélectionnez l'élément en fonction de la valeur dans la liste de sélection (surtout si les valeurs d'option comportent un espace ou un caractère étrange) en procédant simplement comme suit:

$("#SelectList option").each(function () {
    if ($(this).val() == "1:00 PM")
        $(this).attr('selected', 'selected');
});

De plus, si vous avez une liste déroulante (par opposition à une sélection multiple), vous pouvez créer un break; afin d'éviter de remplacer la première valeur trouvée.

1
Nexxas
$('#selectBox option').get(3).attr('selected', 'selected')

Lors de l'utilisation de ce qui précède, des erreurs persistaient dans le Webkit (Chrome): 

"TypeError non capturé: L'objet # n'a pas de méthode 'attr'"

Cette syntaxe arrête ces erreurs. 

$($('#selectBox  option').get(3)).attr('selected', 'selected');
1
benembery

Si vous souhaitez simplement sélectionner un élément en fonction d'une propriété particulière d'un élément, l'option jQuery de type [prop = val] obtiendra cet élément. Maintenant, je me fiche de l'indice, je voulais juste l'article par sa valeur.

$('#mySelect options[value=3]).attr('selected', 'selected');
1
codeguy

vous pouvez définir la valeur de la variable selectoption de manière dynamique ainsi que l'option sera sélectionnée. Vous pouvez essayer le code suivant

code:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>


      $(function(){
            $('#allcheck').click(function(){
             // $('#select_option').val([1,2,5]);also can use multi selectbox
              // $('#select_option').val(1);
               var selectoption=3;
           $("#selectBox>option[value="+selectoption+"]").attr('selected', 'selected');
    });

});

CODE HTML:

   <select id="selectBox">
       <option value="0">Number 0</option>
       <option value="1">Number 1</option>
       <option value="2">Number 2</option>
       <option value="3">Number 3</option>
       <option value="4">Number 4</option>
       <option value="5">Number 5</option>
       <option value="6">Number 6</option>
       <option value="7">Number 7</option>
 </select> <br>
<strong>Select&nbsp;&nbsp; <a style="cursor:pointer;" id="allcheck">click for select option</a></strong>

0
Ram Lakhan Yadav

J'utilise souvent trigger ('change') pour que cela fonctionne

$('#selectBox option:eq(position_index)').prop('selected', true).trigger('change');

Exemple avec id select = selectA1 et position_index = 0 (première option dans select):

$('#selectA1 option:eq(0)').prop('selected', true).trigger('change');
0
Ly Thanh Ngo