Select avec la class correspondant à l'option choisie.

Version imprimable

Peut-on faire un select qui prendrait la class de l'option choisie par l'utilisateur ?

Exemple :

Code:

1
2
3
4
5
6
7
8
<select  class="Fonction qui appellerait la classe de l'option" name="category">
                       <option selected="selected" value="0">-- Faites votre choix --</option>
                       <option value="1" class="AAAAA">choix 1</option>
                       <option value="2" class="BBBBB>choix 2</option>
                       <option value="3" class="CCCCC>choix 3</option>
                       <option value="4" class="DDDDD>choix 4</option>
                       <option value="-1" class="EEEEE>autre choix >></option>
               </select>

18/11/2007, 18h05
Bisûnûrs

Un truc dans le style :

Code:

<select onchange="this.className = this.options[this.selectedIndex].className" ...>
18/11/2007, 23h45
nandofive

En fait je me suis mal exprimé désolé. :oops:

Jai une page avec 24 selects dans un form. L'utilisateur de la page doit en sélectionner 11 sur les 24. Je souhaiterai que les 11 selects aient un fond jaune lorsqu'il sont sélectionnes, mais j'aurai aimé que le fond reste jaune sur ces select si après un submit l'utilisateur revient en arrière avec la fonction précédent de son navigateur.

1/- Est-ce possible ?

Pour plus de compréhension :

http://www.eloquor.fr/script.php

Si vous faites précédent dans votre navigateur le select retient bien le choix mais ne retient pas la class.

J'aurai aimé que le fond reste jaune après le retour en arrière pour des raison de lisibilité.

Encore merci de votre aide. ;)
19/11/2007, 07h54
Bisûnûrs

Je viens de tester ta page avec Firefox2 et IE6 et je n'ai pas eu de problème, le select est resté jaune après un retour arrière.
19/11/2007, 15h16
nandofive

Effectivement le select reste jaune sur IE 7 mais pas sur firefox 2.0.0.9 chez moi. Sûrement un problème lié au navigateur. :(
Je vais voir si je trouve la solution car la réinstallation de firefox n'a rien fait.

Merci ++
19/11/2007, 15h17
Bisûnûrs

Pourtant j'ai bien Firefox 2.0.0.9 aussi et je n'ai pas de soucis.
19/11/2007, 15h45
nandofive

La fonction Autre choix fonctionne sur IE chez toi car elle ne fonctionne que sur firefox chez moi ?
19/11/2007, 15h58
Bisûnûrs

Non, ça ne fonctionne pas sur IE.

Mais tu as pas mal d'erreur de syntaxe, notamment le fait que tu sépares les instructions par des virgules dans le onchange alors qu'il faudrait mettre des points-virgules.

Tu devrais de plus déclarer ta variable $name avant tes fonctions et l'affecter non pas dans le onchang mais dans la fonction clicListe().

Citation:

Envoyé par Bisûnûrs

Non, ça ne fonctionne pas sur IE.

Mais tu as pas mal d'erreur de syntaxe, notamment le fait que tu sépares les instructions par des virgules dans le onchange alors qu'il faudrait mettre des points-virgules.

Tu devrais de plus déclarer ta variable $name avant tes fonctions et l'affecter non pas dans le onchang mais dans la fonction clicListe().

Pour les virgules ok

Comment attribuer la variable $name dans la fonction clicListe()

J'ai tenté un :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function clicListe(obj) { var $name = this.id; var choix = parseInt(obj.options[obj.selectedIndex].value) if (choix==-1) { document.getElementById('inputChoix').style.display = "block"; } else { document.getElementById('inputChoix').style.display = "none"; }
cela ne fonctionne ni sur IE ni sur Firefox. :roll::roll:

A défaut d'attribuer ma nouvelle option à un select précis peut-on l'attribuer au deux select ?

Là tu déclares la variable $name localement. Il faudrait en faire une variable globale. De plus, tu lui affectes this.id, mais this ne correspond plus au select.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script type="text/javascript">
/* Déclaration de la variable globale */
var $name;
 
 
function add() 
{
 var objListe = document.getElementById($name);
 var valTxt = document.getElementById('newcat').value;
 var opt = objListe.options[objListe.options.length-1];
 
 objListe.options[objListe.options.length-1] = new Option(valTxt,valTxt, false, false);
 objListe.options[objListe.options.length] = opt;
 document.getElementById('newcat').value = "";
}
 
function clicListe(obj)
{
 
 /* Affectation de la variable globale */
 $name = obj.id
 
 
 var choix = parseInt(obj.options[obj.selectedIndex].value)
 if (choix==-1)
 {
    document.getElementById('inputChoix').style.display = "block";
 }
 else
 {
    document.getElementById('inputChoix').style.display = "none";
 }
 
}
</script>

20/11/2007, 14h56
nandofive

Un grand merci à Bisûnûrs pour son aide. Le script fonctionne de façon impeccable
dans Firefox 2.0.0.9, Internet explorer 7.0.5730.11 et Netscape 7.1. :king:

PS : Chez moi seul le problème du background des selects persiste dans firefox et Netscape mais cela doit être du à un paramétrage bidon dans mon pc. Si quelqu'un connaît le paramétrage qui peut régler mon problème je suis preneur. ;)