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

Adibombe - Modifié par Adibombe le 12/03/2015 à 17:13
cgandco Messages postés 219 Date d'inscription mercredi 26 octobre 2011 Statut Membre Dernière intervention 22 juin 2017 - 8 avril 2015 à 11:37
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

cgandco Messages postés 219 Date d'inscription mercredi 26 octobre 2011 Statut Membre Dernière intervention 22 juin 2017 9
8 avril 2015 à 11:37
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
0
Rejoignez-nous