Discussion :

[Adibombe]

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 :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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");
                }
            }
       };
   }

[sekaijin]

heu

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<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>

sans aucun javascript c'est le comportement par défaut de tout select

pour pouvoir sélectionner plusieurs valeurs il faut ajouter l'attribut multiple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<select id="select_multiple" name="name" required="required" class="class" multiple="true">
  <option value=""><vide></option>
  <option value="B" selected="selected">Bis</option>
  <option value="T">Ter</option>
  <option value="Q">Quater</option>
</select>

http://www.w3schools.com/jsref/tryit...f_option_index

le membre de l'objet option qui indique qu'un élément est sélectionné est "selected" et pas l'attribut html "selected"
l'attribut html "selected" contient l'information présente dans le code source HTML qui à servit à créer l'objet option affiché par le navigateur.
C'est cette information qui est utilisée si un reset du formulaire est demandé.

"selected" est un attribut obligatoire de l'objet option (mais c'est un texte facultatif dans le code source html) tu ne peux pas faire de removeAttribute("selected");.
tu peux par contre changer sa valeur avec un setAttribute("selected", "false");.

Il ne faut pas confondre le code source html que tu écrit est les objets DOM que le navigateur crée à partir de ce code.

A+JYT

[Adibombe]

Bonjour et merci pour votre réponse,

Je précise que je travaille sur symfony et que lorsque je sélectionne une valeur dans la liste générée par symfony, l'ancienne valeur sélectionnée garde son attribut "selected"

[sekaijin]

encore une fois il ne faut pas confondre html source et objet DOM

l'utilisateur et javascript agissent sur le DOM pas sur le code source

A+JYT