Problème avec Safari et l'event onChange() sur un select

Signaler
-
Messages postés
219
Date d'inscription
mercredi 26 octobre 2011
Statut
Membre
Dernière intervention
22 juin 2017
-
Bonjour à tous,

Alors voilà, cela fait 4heures que je me prend la tête sur un problème qui me rend complètement fou ! Tout fonctionne sur les autres navigateurs, mais sur Safari j'ai un souci que je n'ai trouvé sur aucun sujet Google.

L'objectif de mon script : lors de la sélection d'un élément d'une liste "select", je souhaite supprimer l'attribut "selected" de toutes les autres options. Pour ce faire, je sélectionne mes selects, je crée un événement "onChange()" qui supprime cet attribut "selected" sur les options sauf celui qui vient d'être sélectionné.

Le problème est le suivant : quand je clique sur un élément et que je récupère le "selectedIndex", Safari me renvoie 2 valeurs. Celle sélectionnée par défaut, et la nouvelle valeur.

Je souhaiterais obtenir seulement la dernière valeur sélectionnée.
A savoir que les autre navigateurs me renvoie seulement une valeur.

Quelqu'un aurait une idée s'il vous plaît ??
D'avance merci, car ce problème me bloque complètement.

Le HTML :
<select id="select_indice" name="name" required="required" class="class">
  <option value=""><vide></option>
  <option value="B" selected="selected">Bis</option>
  <option value="T">Ter</option>
  <option value="Q">Quater</option>
</select>


Le script JS :
var object = document.getElementsByTagName("select");
   var select = null;

   for (var i=0; i<object.length; i++) {
       select = object[i];
       
       select.onchange=function() {
            var children = this.childNodes;
            var selectedIndex = this.selectedIndex;
            
            alert(selectedIndex);
            
            
            for (var j=1; j<children.length; j++) {
                if (j != selectedIndex+1) {
                    var child = children[j];
                    //alert(child.text);
                    child.removeAttribute("selected");
                }
            }
       };
   }

1 réponse

Messages postés
219
Date d'inscription
mercredi 26 octobre 2011
Statut
Membre
Dernière intervention
22 juin 2017
9
Bonjour,

avec du retard mais bon

pour moi comme cela ça fonctionne

function loaded()
        {
            var object = document.getElementsByTagName("select");
            var select = null;

            for (var i = 0; i < object.length; i++)
            {
                select = object[i];

                select.onchange  = function ()
                {
                    var children = this.children;
                    var selectedIndex = this.selectedIndex;

                    alert(selectedIndex);


                    for (var j = 0; j < children.length; j++)
                    {
                        if (children[j].tagName.toUpperCase() == "OPTION")
                        {
                            var theselectedAttr = children[j].getAttribute("selected");
                            if (theselectedAttr)
                            {
                                children[j].removeAttribute("selected");
                            }
                            if (j == selectedIndex)
                            {
                                children[j].setAttribute("selected", "selected");
                            }
                        }
                        
                        
                    }
                };
            }
        }




<body onload="loaded();">
     <select id="select_indice" name="name" required="required" class="class">
  <option value=""><vide></option>
  <option value="B" selected="selected">Bis</option>
  <option value="T">Ter</option>
  <option value="Q">Quater</option>
</select>
</body>



bonne journée