11521 sujets

JavaScript, DOM et API Web HTML5

Récupérer l'index d'un childnode

bjr,

j'ai une liste d'options, et je dois récupérer leur index.

<select name="size" id="size">
<option value="54054">Small</option>
<option value="54055">Medium</option>
<option value="54056">Large</option>
<option value="54057">XLarge</option></select>

Par exemple, ici, je voudrai obtenir l'index de mon élément Medium, (ici d'index 1)
A part créer une boucle je ne sais pas vraiment quoi faire

bonne soirée
matt
Salut

Tu fais des recherches google des fois ? c'est pratique, surtout si tu fais ta recherche en anglais. D'ailleurs, je ne sais pas comment font les développeur qui font leur recherche en Français, mais ça marche quand même !

"get index of option selected" => tu tombe sur un exemple direct : 
getElementById("mySelect"). selectedIndex

il suffit de l'adapter à ton code Smiley smile

Pareil en Français (au pire!)
"Recuperer index option select" => 2eme lien on tombe direct ici

Voici avec mon exemple, avec du Jquery bien sûr :
https://codepen.io/JUSEN/pen/VORQVd
Modifié par JENCAL (04 Jun 2019 - 10:30)
JENCAL a écrit :
Salut

Tu fais des recherches google des fois ? c'est pratique, surtout si tu fais ta recherche en anglais. D'ailleurs, je ne sais pas comment font les développeur qui font leur recherche en Français, mais ça marche quand même !

"get index of option selected" =&gt; tu tombe sur un exemple direct : 
getElementById("mySelect"). selectedIndex

il suffit de l'adapter à ton code Smiley smile

Pareil en Français (au pire!)
"Recuperer index option select" =&gt; 2eme lien on tombe direct ici

Voici avec mon exemple, avec du Jquery bien sûr :
https://codepen.io/JUSEN/pen/VORQVd


non on s'est mal compris Smiley decu

Je connais .Selectedindex mais ça donne l'index de l'option choisie. Ce que je cherche ici c'est l'index de chaque option. (ex -> Je veux l'index de l'option avec la value="2")
Bonjour mattzeub,
A part faire une boucle comme dit @Soldat8889 sur select.potions et de récupérer sa position
je ne vois pas

function getIndexOptionByText(sValue){
  var iNb = this.options.length, iIndex = -1 ;
  if(iNb > 0 && sValue != undefined && sValue.trim()!=''){
    for(var i = 0; i < iNb ;i++){ 
      //A méliore suivant ton besoin 
      // includes() | indexOf() ....
      if(this.options[i].text.toLowerCase().trim() == sValue.toLowerCase().trim() ){
        iIndex = i;
        break;
      }
    }
  }
  return iIndex;
}
var oSelected = document.getElementById("size");
console.log(getIndexOptionByText.call(oSelected, "Medium"));

Modifié par aliasdmc (04 Jun 2019 - 19:43)
aliasdmc a écrit :
Bonjour mattzeub,
A part faire une boucle comme dit @Soldat8889 sur select.potions et de récupérer sa position
je ne vois pas

function getIndexOptionByText(sValue){
  var iNb = this.options.length, iIndex = -1 ;
  if(iNb &gt; 0 &amp;&amp; sValue != undefined &amp;&amp; sValue.trim()!=''){
    for(var i = 0; i &lt; iNb ;i++){ 
      //A méliore suivant ton besoin 
      // includes() | indexOf() ....
      if(this.options[i].text.toLowerCase().trim() == sValue.toLowerCase().trim() ){
        iIndex = i;
        break;
      }
    }
  }
  return iIndex;
}
var oSelected = document.getElementById("size");
console.log(getIndexOptionByText.call(oSelected, "Medium"));


Yes c'est une bonne idée. Perso j'ai fais ça et ça marche pas si mal :

    var ElementCount = document.querySelector('#size').childElementCount

    var size = 'MEDIUM'
    var SizeLowerCase = size.toLowerCase()

    for(var i=0; i < ElementCount; i++) {
      if (document.querySelectorAll('#size option')[i].innerText.toLowerCase() === SizeLowerCase) {
        document.querySelector('#size').selectedIndex = i;
      }

    }
Bonjour mattzeub,
Deux choses si je peux me permettre :
1 ) Fais un break une fois que tu as trouvé l'index, cela ne sert à rien de continuer à tester les autres options.
2) A chaque incrémentation du for, tu refais une recherche dans le select des options alors qu'elles sont déjà disponibles dans un tableau du HTMLselect.options
Donc si tu veux optimiser ton script cela donne : 


    var oSelect = document.querySelector('#size'),
    size = 'MEDIUM',
    SizeLowerCase = size.toLowerCase();

    for(var i=0; i < oSelect.options.length ; i++) {
      if (oSelect.options[i].text.toLowerCase() === SizeLowerCase) {
        oSelect.selectedIndex = i;
        // ou 
        //oSelect.options[i].selected = true;
        break;
      }
    }
Sujet clos
Aller à