1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML

Soucis de <select> qui fonctionne sous safari et pas sous IE [Résolu]

Signaler
Messages postés
16
Date d'inscription
jeudi 23 octobre 2008
Statut
Membre
Dernière intervention
24 octobre 2008
 -
Messages postés
16
Date d'inscription
jeudi 23 octobre 2008
Statut
Membre
Dernière intervention
24 octobre 2008
 -
Bonjour à vous tous,

Je vais tacher d'être clair sans vous bombarder d'un message illisible. En précisant que j'ai parcouru le fofo mais pas trouver la soluce :/
Donc le truc c'est :
-> un formulaire avec plusieurs <select> qui se suivent.
-> le premier <select> contient des gammes.
-> le deuxième contient des couleurs qui sont affichées dynamiquement en fonction de la gamme que l'on choisit.
-> javascript et php

Tout fonctionne sous Safari mais sous IE, le deuxième <select> est vide si je sélectionne une gamme dans le premier <select>.

Voici les bouts de codes importants (je précise que je débute en javascript / php).

[code de la page php]
<?php
$max = 11;
for($i=1; $i<$max; $i++) {
???><form name="contact" method="post" action="demande-de-devis-etp2.php" onsubmit="return verif_submit()"><select size="1" name="gamme<?php echo $i; ?>" id="gamme<?php echo $i; ?>" onchange="changer<?php echo $i; ?>()"><option value="0">Sélectionnez</option><option value="Rivoli">Rivoli</option><option value="Les métalliques">Les métalliques</option></select><select size="1" name="ref<?php echo $i; ?>" id="ref<?php echo $i; ?>"><option value="0">à définir</option></select></form>
de la page php

[code du .js]
function changer1() {
if (document.contact.gamme1.value == "Rivoli" ) {
document.getElementById('ref1').innerHTML = '<option value="00 / blanc">00 / blanc</option><option value="01 / noir">01 / noir</option><option value="12 / rouge">12 / rouge</option>';
}

if (document.contact.gamme1.value == "Les métalliques" ) {
document.getElementById('ref1').innerHTML = '<option value="01 / or">01 / or</option><option value="02 / argent">02 / argent</option><option value="03 / bronze">03 / bronze</option><option value="04 / cuivre">04 / cuivre</option>';
}
}
du .js

<-- en="" pleine="" boucle="" infinie="" --=""></--></select></select></select></select>

27 réponses

1 2
Réponse 1 / 27
Messages postés
16
Date d'inscription
jeudi 23 octobre 2008
Statut
Membre
Dernière intervention
24 octobre 2008
oui, je veux bien mais impossible de trouver où on l'indique ?

patrice (mode boulet :)-)
Réponse 2 / 27
Messages postés
16
Date d'inscription
jeudi 23 octobre 2008
Statut
Membre
Dernière intervention
24 octobre 2008
Bonjour à vous tous,

Je vais tacher d'être clair sans vous bombarder d'un message illisible. En précisant que j'ai parcouru le fofo mais pas trouver la soluce :/ Donc le truc c'est :

-> un formulaire avec plusieurs select

-> le premier présente des gammes
-> le deuxieme presente des couleurs qui sont affichées dynamiquement par le biais du premier select.
-> javascript / php / navigateur.

Tout fonctionne sous safari mais pas sous IE. 

<?php
$max = 11;
for($i=1; $i<$max; $i++) {
?>
<tr>
<form name="contact" method="post" action="....php" onsubmit="return verif_submit()">

<td width="120">
<select size="1" name="gamme<?php echo $i; ?>" id="gamme<?php echo $i; ?>" onchange="changer<?php echo $i; ?>()">
<option value="0">Sélectionnez</option>

<option value="Rivoli">Rivoli</option>
<option value="Les métalliques">Les métalliques</option>
</select>


<select size="1" name="ref<?php echo $i; ?>" id="ref<?php echo $i; ?>">
<option value="0">à définir</option>
</select>



et le .js : 
function changer1() {
  if (document.contact.gamme1.value == "Rivoli" ) {
    document.getElementById('ref1').innerHTML = '<option value="00 / blanc">00 / blanc</option><option value="01 / noir">01 / noir</option><option value="12 / rouge">12 / rouge</option>';
  }
  
  if (document.contact.gamme1.value == "Les métalliques" ) {
    document.getElementById('ref1').innerHTML = '<option value="01 / or">01 / or</option><option value="02 / argent">02 / argent</option><option value="03 / bronze">03 / bronze</option><option value="04 / cuivre">04 / cuivre</option>';
  } 
}




merci par avance
Réponse 3 / 27
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 33
bonjour,

>>sans vous bombarder d'un message illisible
trop tard ( ou trottoir comme tu veux )
le html pris en compte ! et on ne voit rien de ton code ( ou si peu ! )
reviens à la textbox classqiue
( en dessous du bouton ajouter :
[../infomsg.aspx?ajout=&ID=1218977&txtmode=0 Si vous n'arrivez pas à saisir votre message, CLIQUEZ ICI pour revenir à une "TextBox classique"]

)
 ou  poste nous ton code depuis un éditeur de texte basique
  pas depuis ton outil de développement.

Cordialement

          Bul [mon Site] [M'écrire]         
Réponse 4 / 27
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 33
ah.. ça va mieux....
à priori c'est l'histoire de select liés ?
innerHTML ne fonctionne pas avec IE pour un select
( ce que tu dois utiliser peut-être ? )

ch'tiot exemple ?  ( il y a php, ajax, mais regarde en  javascript )
( le principe : il faut effacer et recréer les options )

Cordialement

          Bul [mon Site] [M'écrire]         
Réponse 5 / 27
Messages postés
16
Date d'inscription
jeudi 23 octobre 2008
Statut
Membre
Dernière intervention
24 octobre 2008
Kikoo Bul,

le deuxieme essai est beaucoup plus clair non ? :)

patrice
Réponse 6 / 27
Messages postés
16
Date d'inscription
jeudi 23 octobre 2008
Statut
Membre
Dernière intervention
24 octobre 2008
oki bul,

En effet j'utilise innerHTML dans le fichier .JS :
if (document.contact.gamme1.value == "Rivoli" ) {
document.getElementById('ref1').innerHTML = '

je regarde ton lien et reviens vers toi.

Mici :)
Réponse 7 / 27
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 33
oui
ma deuxième réponse aussi ? j'espère !
          Bul [mon Site] [M'écrire]         
Réponse 8 / 27
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 33
rigolo de se croiser sans cesse... ( pas de connotation sexuelle hein ! )
          Bul [mon Site] [M'écrire]         
Réponse 9 / 27
Messages postés
16
Date d'inscription
jeudi 23 octobre 2008
Statut
Membre
Dernière intervention
24 octobre 2008
bul,

tant que je te tiens :), je débute en javascript (formulaire) et ne connait pas trop les différences de codages pour navigateurs.

onchange="gensel2();" => pour toi le point virgule après les () est primordial où il n'entraine pas de soucis ?

Je continue de regarder le lien :)

Mici d'avance
patrice
Réponse 10 / 27
Messages postés
626
Date d'inscription
samedi 28 septembre 2002
Statut
Membre
Dernière intervention
18 mai 2009
 3
if (document.contact.gamme1.value == "Rivoli" ){
    var newOption = document.createElement('option');
    newOption.setAttribute('value', '00 / blanc');
    var newOptionLabel = document.createTextNode('00 / blanc');
    newOption.appendChild(newOptionLabel);
    document.getElementById('ref1').appendChild(newOption);
   
// Et ainsi de suite...




Je te conseilles de créer une fonction qui t'automatisera cette tâche. Celà t'evitra de tapper X fois la même chose. Du genre :

function newOption(sel, val, label){
    var newOption = document.createElement('option');
    newOption.setAttribute('value', val);
    var newOptionLabel = document.createTextNode(label);
    newOption.appendChild(newOptionLabel);
    document.getElementById(sel).appendChild(newOption);
}

Ainsi tu peux utiliser directement cette méthode :

if (document.contact.gamme1.value == "Rivoli" ){
    newOption('ref1', '00 / blanc', '00 / blanc');
    newOption('ref1', '01 / noir', '01 / noir');
    // etc...
}

<hr size="2" width="100%" />Projet en cours : Joof
Réponse 11 / 27
Messages postés
16
Date d'inscription
jeudi 23 octobre 2008
Statut
Membre
Dernière intervention
24 octobre 2008
Salut Duke,

Tout d'abord merci de t'intéresser à min soucis au vu du nombre de post qui existe sur le sujet des select :)

Alors j'aime bien e que je vois car cela utilise ce que la base que j'ai. Une simple question :
le pavé suivant : "function newOption(sel, val, label){..." est à mettre en haut du fichier .js et juste après j'enquille sur les conditions ?

Merci par avance
patrice
Réponse 12 / 27
Messages postés
626
Date d'inscription
samedi 28 septembre 2002
Statut
Membre
Dernière intervention
18 mai 2009
 3
Avant, après... c'est comme tu le sens.

<hr size="2" width="100%" />Projet en cours : Joof
Réponse 13 / 27
Messages postés
16
Date d'inscription
jeudi 23 octobre 2008
Statut
Membre
Dernière intervention
24 octobre 2008
Re,

Alors j'ai essayé avec ton code ce qui me donne ça :
FICHIER JS :
function newOption(sel, val, label){
var newOption = document.createElement('option');
newOption.setAttribute('value', val);
var newOptionLabel = document.createTextNode(label);
newOption.appendChild(newOptionLabel);
document.getElementById(sel).appendChild(newOption);
}

if (document.contact.gamme1.value == "Rivoli"){
newOption('ref1', '00 / blanc', '00 / blanc');
newOption('ref1', '01 / noir', '01 / noir');
newOption('ref1', '01 / bleu', '01 / bleu');
newOption('ref1', '01 / vert', '01 / vert');
}

if (document.contact.gamme1.value == "Les métalliques"){
newOption('ref1', '00 / or', '00 / or');
newOption('ref1', '01 / argent', '01 / argent');
}

PAGE PHP :
<select size="1" name="gamme<?php echo $i; ?>" id="gamme<?php echo $i; ?>" onchange="newOption();">
<option value="Rivoli">Rivoli</option>
<option value="Les métalliques">Les métalliques</option>
</select>

<select size="1" name="ref<?php echo $i; ?>" id="ref<?php echo $i; ?>">
<option value="0">à définir</option>
</select>

mais sous safari cela ne fonctionne plus du tout :/. Qu'en penses-tu ?

Merci par avance

patrice
Réponse 14 / 27
Messages postés
626
Date d'inscription
samedi 28 septembre 2002
Statut
Membre
Dernière intervention
18 mai 2009
 3
Ha oui effectivement ça risque de ne pas fonctionner. La fonction newOption() que je t'ai proposé est une fonction générique qui te permet d'ajouter des options à un select.

Dans ton select tu as mis onchange= "newOption();" hors ce n'est pas tout à fait ça. Il faut que ton select lance une fonction qui elle va utiliser la fonction newOption(). Enfin bref, voilà les changements à faire :

<select size="1" name="gamme<?php echo $i; ?>" id="gamme<?php echo $i; ?>" onchange="newOption();" >

function checkGamme(){
    if (document.contact.gamme1.value == "Rivoli"){
        newOption('ref1', '00 / blanc', '00 / blanc');
        newOption('ref1', '01 / noir', '01 / noir');
        newOption('ref1', '01 / bleu', '01 / bleu');
        newOption('ref1', '01 / vert', '01 / vert');
    }
}

<hr size ="2" width="100%" />Projet en cours : Joof
Réponse 15 / 27
Messages postés
626
Date d'inscription
samedi 28 septembre 2002
Statut
Membre
Dernière intervention
18 mai 2009
 3
Erreur de copier/coller

<select size= "1" name="gamme<?php echo $i; ?>" id="gamme<?php echo $i; ?>" onchange="

checkGamme


();">






<hr size ="2" width="100%" />

Projet en cours : Joof
Réponse 16 / 27
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 33
>>onchange="gensel2();" => pour toi le point virgule après les ()
>>est primordial où il n'entraine pas de soucis ?
à priori, les ordres js doivent se terminer par ;
est-ce que l'omettre porte à conséquence ?
( oulah ???
faudrait voir ce que cela suppose coté navigateur et le reste )

mais je le met toujours ( pas toujours où il faudrait ! j'en oublie )


pour ajouter <option> j'utilise plus volontiers
select.length++;
select.options[select.length-1].text="le texte visible";
ça me semble nettement plus simple,
mais XTremDuke a sûrement raison.
@+
Réponse 17 / 27
Messages postés
16
Date d'inscription
jeudi 23 octobre 2008
Statut
Membre
Dernière intervention
24 octobre 2008
merci a vous deux,

je regarde les denieres majs du codes et vous tiens au courant, surement demain .

Merci en tout cas :)

patrice
Réponse 18 / 27
Messages postés
16
Date d'inscription
jeudi 23 octobre 2008
Statut
Membre
Dernière intervention
24 octobre 2008
bonjour a vous deux,

Alors voici ce que j'ai aujourd'hui. Concrètement, les informations sont modifiées en fonction de la gamme choisie. Le seul soucis, c'est qu'il rajoute les option alors qu'il faudrait qu'il les remplace :). Je comprends l'organisation du code mais je ne m'y connais pas assez pour peaufiner cela par rapport à ce soucis. Faut-il rajouter une condition ?

FICHIER JS :
function newOption(sel, val, label){
var newOption = document.createElement('option');
newOption.setAttribute('value', val);
var newOptionLabel = document.createTextNode(label);
newOption.appendChild(newOptionLabel);
document.getElementById(sel).appendChild(newOption);
}

function checkGamme(){
if (document.contact.gamme1.value == "Rivoli"){
newOption('ref1', '00 / blanc', '00 / blanc');
newOption('ref1', '01 / noir', '01 / noir');
newOption('ref1', '01 / bleu', '01 / bleu');
newOption('ref1', '01 / vert', '01 / vert');
}

if (document.contact.gamme1.value == "Les métalliques"){
newOption('ref1', '00 / or', '00 / or');
newOption('ref1', '01 / argent', '01 / argent');
}
}

PAGE PHP :
<?php
$max = 11;
for($i=1; $i<$max; $i++) {
?>
<select size="1" name="gamme<?php echo $i; ?>" id="gamme<?php echo $i; ?>" onchange="checkGamme();">
<option value="0">Sélectionnez</option>
<option value="Rivoli">Rivoli</option>
<option value="Les métalliques">Les métalliques</option>
</select>
<select size="1" name="ref<?php echo $i; ?>" id="ref<?php echo $i; ?>">
<option value="0">à définir</option>
</select>

merci à vous par avance
Patrice
Réponse 19 / 27
Messages postés
16
Date d'inscription
jeudi 23 octobre 2008
Statut
Membre
Dernière intervention
24 octobre 2008
est-ce que "newOption" est un type de variable connu déterminée par avance ou quelquechose que l'on créé à la volée et que l'on peaufine à volontée ?
Réponse 20 / 27
Messages postés
16
Date d'inscription
jeudi 23 octobre 2008
Statut
Membre
Dernière intervention
24 octobre 2008
J'ai trouver certaines fonctions, j'ai essayé de les utiliser mais rien n'y fait. Car pour moi, sans être expert, il faut que si des options existent déjà, on les remplace, donc que l'on supprime et que l'on recréé. Voici ce que j'ai trouvé comme truc intéressant :

setAttribute(attribut,valeur)
Ajoute un nouvel attribut avec la valeur à l'objet.

appendChild(enfant)
Ajoute enfant en tant que nœud enfant (childNode) à l'objet. enfant doit être un objet, vous ne pouvez pas utiliser de chaîne de caractères.

cloneNode()
Copie le nœud entier avec tous les nœuds enfants.

hasChildNodes()
Vérifie si un objet possède des nœuds enfants (childNodes), et renvoie true si c'est le cas.

insertBefore(nouvelEnfant,ancienEnfant)
Insère nouvelEnfant avant ancienEnfant dans l'arbre du document.

removeChild(ancienEnfant)
Supprime le nœud enfant ancienEnfant.

replaceChild(nouvelEnfant,ancienEnfant)
Remplace ancienEnfant par nouvelEnfant.

removeAttribute(attribut)
Supprime l'attribut de l'objet.

Mais je ne sais comment procéder :/

Merci par avance
patrice
Répondre Posez votre question