J'ai une case 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>

Je voudrais définir l'une des options comme "sélectionnée" en fonction de son index sélectionné.

Par exemple, si j'essaye de mettre "Numéro 3", j'essaye ceci:

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

Mais ça ne marche pas. Comment puis-je définir une option comme sélectionnée en fonction de son index à l'aide de jQuery?

Merci!

REMARQUE : 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, .getne fonctionnera pas car il retourne un élément DOM, pas un élément jQuery. Gardez à l'esprit que la .eqfonction 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 la valeur , au lieu de compter sur la sélection d'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"))

Cela peut également être utile, j'ai donc pensé 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 effectuer les opérations suivantes:

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 désormais "Numéro 2".

Essayez plutôt ceci:

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

Encore plus simple:

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

# Set element with index
$("#select option:eq(2)").attr("selected", "selected");

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

lorsque vous souhaitez sélectionner avec les meilleures façons de définir la sélection, 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();

Ce qui est important à comprendre, c'est que val()pour un selectélément renvoie la valeur de l'option sélectionnée, mais pas le nombre d'éléments comme selectedIndexen javascript.

Pour sélectionner l'option avec value="7"vous, 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 <select>élément doit avoir un MULTIPLEattribut, sinon cela ne fonctionnera pas.

J'ai toujours eu des problèmes avec les accessoires («sélectionnés»), ce qui suit a toujours fonctionné pour moi:

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

Essaye ça:

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

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

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

J'espère que cela pourrait aider trop

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

sélectionnez la 3ème option

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

Exemple sur jsfiddle

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 TypeError, par exemple dans FF avec: "$ ('option # selectBox') [3] .attr () pas une fonction . "

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 obtient l'objet DOM, pas un objet jQuery, donc la solution suivante ne fonctionnera pas:

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

eq()obtient filtre l'ensemble 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. $($('#selectBox option')[3])est plus efficace (voir cas de test ).

Cependant, vous n'avez pas vraiment 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 d'une importance vitale:

L'attribut "sélectionné" n'est pas la façon dont vous spécifiez un bouton radio sélectionné (dans Firefox et Chrome au moins). Utilisez l'attribut "vérifié":

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

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

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

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

Où #nameest select id et idxest la valeur d'option que vous souhaitez sélectionner.

L' attribut selectedIndex javascript pur est la bonne solution, car il s'agit de javascript pur et fonctionne sur plusieurs navigateurs:

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

Voici une démo 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 l'appeler avant de modifier le selectedIndex si vous voulez l'attribut "selected" sur la balise option ( voici le violon ):

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

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

J'utilise souvent le déclencheur («changement») pour le faire fonctionner

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

Exemple avec id select = selectA1 et position_index = 0 (option frist dans select):

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

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

Lors de l'utilisation de ce qui précède, je continuais à recevoir des erreurs dans le kit Web (Chrome) en disant:

"TypeError non intercepté: l'objet # n'a pas de méthode 'attr'" "

Cette syntaxe arrête ces erreurs.

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

Sélectionnez l'élément en fonction de la valeur dans la liste de sélection (surtout si les valeurs des options ont un espace ou un caractère étrange) en faisant simplement ceci:

$("#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 voudrez peut-être faire un break;afin que vous n'obteniez pas la première valeur trouvée à être écrasée.

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; 

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 ne me soucie plus de l'index que je voulais juste l'élément par sa valeur.

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

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 deuxième événement consiste à sélectionner l'option par défaut à l'aide d'une fonction telle que val (), etc.

Vous devez vous assurer que le deuxième événement se produise après le premier événement .

Pour y parvenir, prenez deux fonctions, disons generateSelectbox () (pour la génération de la boîte de sélection) et selectDefaultOption ()

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

Vous pouvez également initier plusieurs valeurs si votre boîte de sélection est un multiplicateur:

$('#selectBox').val(['A', 'B', 'C']);

vous pouvez définir dynamiquement la valeur de la variable selectoption 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>

Prochainement:

$("#selectBox").attr("selectedIndex",index)

où index est l'index sélectionné sous forme d'entier.