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

Messages postés
16
Date d'inscription
jeudi 23 octobre 2008
Statut
Membre
Dernière intervention
24 octobre 2008

je pensais à quelquechose comme cela mais je n'arrive pas à trouver la bonne syntaxe, la bonne cible et à savoir si c'est dans le bon ordre d'interprétation :

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.getElementById(sel).hasChildNodes(newOption)) {
document.getElementById(sel).replaceChild(newOption,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.removeAttribute('value', val);
newOption('ref1', '00 / or', '00 / or');
newOption('ref1', '01 / argent', '01 / argent');
}
}

Bien à vous

patrice
Messages postés
626
Date d'inscription
samedi 28 septembre 2002
Statut
Membre
Dernière intervention
18 mai 2009
3
@Bultez: Oui ca fonctionne aussi, je ne lui ai proposé qu'un exemple, mais ils sont nombreux. On aurait pu avoir aussi :

select.options[select.options.length] = new Option('text', 'value');

Après tout dépend de son mode de programmation.

@Zoubloub75 :

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.getElementById(sel).hasChildNodes(newOption)) {

     document.getElementById(sel).replaceChild( newOption,newOption );

    }

}

Ta fonction n'est pas très logique. Tu veux remplacer un objet par le même objet ?
Si tu veux supprimer le contenu du select avant d'en ajouter des nouveaux, essaie un truc du genre :

function deleteSelectOptions(sel){
    var sel = document.getElementById(sel);
    var listOptions = sel.getElementsByTagName('option');
    for(var option in listOptions) option.parentNode.removeChild(option);
}

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"){
        deleteSelectOptions('ref1');
        newOption('ref1', '00 / blanc', '00 / blanc');
        newOption('ref1', '01 / noir', '01 / noir');
        newOption('ref1', '01 / bleu', '01 / bleu');
        newOption('ref1', '01 / vert', '01 / vert');
    }
}

Je rappelles que ce n'est qu'une idée est l'approche peut être différent en fonction de tes habitudes.

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

merci Duke :)

Je regarde ça et vous tiens au courant

Patrice
Messages postés
16
Date d'inscription
jeudi 23 octobre 2008
Statut
Membre
Dernière intervention
24 octobre 2008

Re,

Pour ce qui est du type de programmation, celle que tu m'as proposé duke me convient parfaitement car j'aborde le javascript là et je comprends à peu de choses près comment cela fonctionne (sinon j'aurais trouver la soluce :))

Alors je viens d'essayer avec le code que tu m'as proposé et là rien ne se passe ni sur safari, ni sur IE.

- La boucle for ne doit pas avoir des {} ?

Je vais y arriver, je vais y arriver ...

patrice
Messages postés
626
Date d'inscription
samedi 28 septembre 2002
Statut
Membre
Dernière intervention
18 mai 2009
3
P'ite erreur de ma part :

function deleteSelectOptions(sel){
    var sel = document.getElementById(sel);
    var listOptions = sel.getElementsByTagName('option');
    var nbOpts = listOptions.length;
    for(var i = nbOpts-1; i >= 0; i--) sel.removeChild(listOptions[i]);
}

Les accolades dans les boucles (comme les conditions et bientôt les fonctions) ne sont pas obligatoires lorsqu'il n'y a qu'une action. Exemple:

if(variable == 'toto'){
    alert('ok');
}else{
    alert('Pas d\'accord');
}

// Equivaut à
if(variable == 'toto') alert('ok');
else alert('Pas d\'accord');

// Peut être même réduit par :

alert(variable == 'toto' ? 'ok' : 'Pas d\'accord');
<hr size="2" width="100%" />Projet en cours : Joof
Messages postés
16
Date d'inscription
jeudi 23 octobre 2008
Statut
Membre
Dernière intervention
24 octobre 2008

YOUHOU :) PROBLEME RESOLU

Merci Duke, ca marche nikel... Soucis résolu.

Merci infiniement d'avoir accordé un tantiné d'importance à mon problème.

Je vous souhaite à vous deux une très bonne fin de journée :)

patrice
Messages postés
626
Date d'inscription
samedi 28 septembre 2002
Statut
Membre
Dernière intervention
18 mai 2009
3
Pas de problème.

N'oublies pas de marquer ton poste comme "Résolu"

<hr size="2" width="100%" />Projet en cours : Joof