Sujet Précédent Sujet Suivant

Soucis de <select> qui fonctionne sous safari et pas sous IE

Résolu
zoubloub75 Messages postés 16 Date d'inscription jeudi 23 octobre 2008 Statut Membre Dernière intervention 24 octobre 2008 - 23 oct. 2008 à 16:23
zoubloub75 Messages postés 16 Date d'inscription jeudi 23 octobre 2008 Statut Membre Dernière intervention 24 octobre 2008 - 24 oct. 2008 à 12:06
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
zoubloub75 Messages postés 16 Date d'inscription jeudi 23 octobre 2008 Statut Membre Dernière intervention 24 octobre 2008
24 oct. 2008 à 12:06
oui, je veux bien mais impossible de trouver où on l'indique ?

patrice (mode boulet :)-)
3
Réponse 2 / 27
zoubloub75 Messages postés 16 Date d'inscription jeudi 23 octobre 2008 Statut Membre Dernière intervention 24 octobre 2008
23 oct. 2008 à 16:34
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
0
Réponse 3 / 27
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
23 oct. 2008 à 16:36
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]         
0
Réponse 4 / 27
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
23 oct. 2008 à 16:41
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]         
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 27
zoubloub75 Messages postés 16 Date d'inscription jeudi 23 octobre 2008 Statut Membre Dernière intervention 24 octobre 2008
23 oct. 2008 à 16:42
Kikoo Bul,

le deuxieme essai est beaucoup plus clair non ? :)

patrice
0
Réponse 6 / 27
zoubloub75 Messages postés 16 Date d'inscription jeudi 23 octobre 2008 Statut Membre Dernière intervention 24 octobre 2008
23 oct. 2008 à 16:44
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 :)
0
Réponse 7 / 27
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
23 oct. 2008 à 16:44
oui
ma deuxième réponse aussi ? j'espère !
          Bul [mon Site] [M'écrire]         
0
Réponse 8 / 27
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
23 oct. 2008 à 16:46
rigolo de se croiser sans cesse... ( pas de connotation sexuelle hein ! )
          Bul [mon Site] [M'écrire]         
0
Réponse 9 / 27
zoubloub75 Messages postés 16 Date d'inscription jeudi 23 octobre 2008 Statut Membre Dernière intervention 24 octobre 2008
23 oct. 2008 à 16:46
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
0
Réponse 10 / 27
XtremDuke Messages postés 626 Date d'inscription samedi 28 septembre 2002 Statut Membre Dernière intervention 18 mai 2009 4
23 oct. 2008 à 16:54
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
0
Réponse 11 / 27
zoubloub75 Messages postés 16 Date d'inscription jeudi 23 octobre 2008 Statut Membre Dernière intervention 24 octobre 2008
23 oct. 2008 à 17:05
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
0
Réponse 12 / 27
XtremDuke Messages postés 626 Date d'inscription samedi 28 septembre 2002 Statut Membre Dernière intervention 18 mai 2009 4
23 oct. 2008 à 17:10
Avant, après... c'est comme tu le sens.

<hr size="2" width="100%" />Projet en cours : Joof
0
Réponse 13 / 27
zoubloub75 Messages postés 16 Date d'inscription jeudi 23 octobre 2008 Statut Membre Dernière intervention 24 octobre 2008
23 oct. 2008 à 17:21
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
0
Réponse 14 / 27
XtremDuke Messages postés 626 Date d'inscription samedi 28 septembre 2002 Statut Membre Dernière intervention 18 mai 2009 4
23 oct. 2008 à 17:46
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
0
Réponse 15 / 27
XtremDuke Messages postés 626 Date d'inscription samedi 28 septembre 2002 Statut Membre Dernière intervention 18 mai 2009 4
23 oct. 2008 à 17:47
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
0
Réponse 16 / 27
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
23 oct. 2008 à 18:36
>>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.
@+
0
Réponse 17 / 27
zoubloub75 Messages postés 16 Date d'inscription jeudi 23 octobre 2008 Statut Membre Dernière intervention 24 octobre 2008
23 oct. 2008 à 19:24
merci a vous deux,

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

Merci en tout cas :)

patrice
0
Réponse 18 / 27
zoubloub75 Messages postés 16 Date d'inscription jeudi 23 octobre 2008 Statut Membre Dernière intervention 24 octobre 2008
24 oct. 2008 à 08:41
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
0
Réponse 19 / 27
zoubloub75 Messages postés 16 Date d'inscription jeudi 23 octobre 2008 Statut Membre Dernière intervention 24 octobre 2008
24 oct. 2008 à 08:49
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 ?
0
Réponse 20 / 27
zoubloub75 Messages postés 16 Date d'inscription jeudi 23 octobre 2008 Statut Membre Dernière intervention 24 octobre 2008
24 oct. 2008 à 09:14
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
0

Discussions similaires

Fonction DISTINCT
KC62 -
KC62 -

2 réponses
Faire une somme dans un select
rudra117 -
Whismeril -

7 réponses
select sum sur plusieurs tables
cudenetf -
aieeeuuuuu -

6 réponses
select ...from(select ...from..)
cs_mariam1987 -
crn_c21 -

2 réponses
Select avec Linq
shadow1779 -
yannickiwi -

2 réponses
Rejoignez-nous