jQuery Set Sélectionner Index

J’ai une boîte de sélection:

 Number 0 Number 1 Number 2 Number 3 Number 4 Number 5 Number 6 Number 7  

Je voudrais 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 “Number 3”, j’essaie ceci:

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

Mais cela ne fonctionne pas. Comment puis-je définir une option en fonction de son index en utilisant 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, .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.

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

Vous pouvez également être plus concis / lisible si vous souhaitez utiliser la valeur , au lieu de vous fier à la sélection d’un index spécifique:

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

Remarque: .val(3) fonctionne aussi bien 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, vous oblige à utiliser .val("hello") )

Cela peut aussi être utile, alors j’ai pensé que je l’appendais ici.

Si vous souhaitez sélectionner une valeur en fonction de la valeur de l’élément et non de l’index de cet élément, vous pouvez effectuer les opérations suivantes:

Votre liste de sélection:

  

Le jquery:

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

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

L’élément sélectionné serait “Number 2” maintenant.

Essayez plutôt ceci:

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

De plus, voyez si cela vous aide:

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

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 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 atsortingbutes $("#select option:selected").text(); # use attr() for get atsortingbutes # 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(""); # Remove an item $("#select option:eq(0)").remove(); 

Ce qui est important à comprendre, c’est que val() pour un élément select renvoie la valeur de l’option sélectionnée, mais pas le nombre d’éléments, contrairement à 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 cette 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 doit avoir un atsortingbut MULTIPLE , sinon cela ne fonctionnera pas.

J’ai toujours eu des problèmes avec prop («sélectionné»), 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); 

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’object DOM, pas un object jQuery, alors la solution suivante ne fonctionnera pas:

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

eq() obtient des filtres pour définir 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 le cas de test ).

Vous n’avez cependant pas besoin de l’object jQuery. Ça fera l’affaire:

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

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

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

Un autre point essentiel:

L’atsortingbut “sélectionné” n’est pas la manière dont vous spécifiez un bouton radio sélectionné (dans Firefox et Chrome au moins). Utilisez l’atsortingbut “checked”:

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

La même chose vaut pour les cases à cocher.

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

#name est select id et idx est la valeur de l’option que vous souhaitez sélectionner.

L’atsortingbut pure javascript selectedIndex est la bonne façon de procéder, car c’est du javascript pur et fonctionne avec 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:

   

Vous pouvez également appeler ceci avant de changer le selectedIndex si ce que vous voulez est l’atsortingbut “selected” sur la balise d’option ( voici le violon ):

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

sélectionnez 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 permet d’obtenir l’object dom, pas un object jquery, de sorte qu’il échouera avec une erreur TypeError, par exemple dans FF avec: “$ (‘# selectBox option’) [3] .attr () n’est pas une fonction . ”

 //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); } }); 
 $('#selectBox option').get(3).attr('selected', 'selected') 

En utilisant ce qui précède, j’ai continué à avoir des erreurs dans webkit (Chrome) en disant:

“UnCaught TypeError: Object # 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 (en particulier si les valeurs de l’option 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 pouvez faire une break; donc vous n’obtenez pas la première valeur trouvée pour ê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 données ont échoué dans un navigateur. Cela semble fonctionner dans FF10 et IE8 (quelqu’un d’autre peut 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 passer par les événements (c.-à-d. 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 sélectionne l’option par défaut en utilisant n’importe quelle 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, il faut deux fonctions permettent de générer generateSelectbox () (pour générer une boîte de sélection) et de sélectionnerDefaultOption ()

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

Vous pouvez également initialiser plusieurs valeurs si votre selectbox est un multiplicateur:

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

vous pouvez définir la valeur de la variable selectoption de manière dynamic et l’option sera sélectionnée.Vous pouvez essayer le code suivant

code:

   

  $(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   click for select option

Prochainement:

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

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