Discussion :

[artistenherbe]

Bonjour,

Je souhaiterais savoir s'il est possible de personnaliser les attributs dans une balise <option> d'un formulaire.
j'ai essayé mais sa ne fonctionne pas, peut-etre y'a-t-il un autre moyen ?


par exemple :

Code :

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

<option value="1" mon_attibut_perso="ma_value">mon option</option>

Si besoin je peux partager le code dans lequel je tente de faire sa, mais y'a du javascript et je voudrais pas poster au mauvais endroit ducoup.

Merci a vous.

[T4GAD4]

Bonjour,

Je vais peut etre dire une betises mais je pense qu'il n'y a que trois attributs pour la balise option:

Selected: Indique qu'une option est pré-sélectionnée. En présence de l'attribut MULTIPLE dans la déclaration plusieurs options peuvent être pré-sélectionnées.

Value: Indique une valeur spécifique à retourner en cas de sélection de l'option.

Disabled: Cet attribut permet de désactiver une option dans une liste: l'item correspondant ne sera pas soumis au serveur même s'il est sélectionné (article en rupture de stock par exemple).

[artistenherbe]

ok, je m'en doutais un peu....

mais alors y'aurait-il un autre moyen de simuler plusieurs attributs "non officiels"...

Voici mon code (que je n'ai pas créé ) et sur lequel je voulais adapter cette solution.

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
18
19
20
21
22
23
 
    <script type="text/javascript">
    function setInputText()
    {
    var mylist=document.getElementById("myList" )
    document.getElementById("txt" ).value=mylist.options[mylist.selectedIndex].text
    document.getElementById("num" ).value=mylist.options[mylist.selectedIndex].value
    document.getElementById("name" ).value=mylist.options[mylist.selectedIndex].label
document.getElementById("attribut" ).value=mylist.options[mylist.selectedIndex].attr_perso
    }
    </script>
    <form>
    Select option:
    <select id="myList" onchange="setInputText()">
      <option value="1" label="lab1" attr_perso="tata">txt1</option>
      <option value="2" label="lab2" attr_perso="titi">txt2</option>
      <option value="3" label="lab3" attr_perso="toto">txt3</option>
    </select>
    <br />The text is: <input type="text" id="txt" size="20">
    <br />The value is: <input type="text" id="num" size="20">
    <br />The name is: <input type="text" id="name" size="20">
    <br />The attribut perso is: <input type="text" id="attribut" size="20">
    </form>

Merci de votre aide.

[Invité]

Bonjour,
=> HTML <option> Tag

[artistenherbe]

merci pour ce lien,

je dois donc comprendre que l'on ne peut pas créer ses propres noms d'attributs pour une balise , et qu'il faut que je fonctionne autrement,
mais je ne sais pas comment...

Mon soucis est que j'ai une liste déroulante alimentée par la table d'une base de donnée depuis un seul champ.
Après sélection, je souhaite que des input soient remplis par les autres champs de la table (une bonne vingtaine ) correspondant a l'enregistrement choisi dans la liste.

PS: je recupere les données de ma liste grace a un tableau associatif, du coup j'ai accès aux autre champs par $ma_var = $var["NOM"]

je ne sais pas suis je suis très clair, et je n'ai pas trouvé d'exemple que je comprenne.

Quelqu'un saurait-il me mettre sur la bonne voie ?
merci de votre patience.

[Muchos]

Je ne comprends pas pourquoi tu ne peux pas utiliser une class ou un id…

[Bovino]

Tu peux tout à fait créer tous les attributs persos que tu veux. Cela empêchera juste ta page d'être valide (sauf si tu utilises les attributs data-xxx) mais ce n'est pas le plus important.

En revanche, tu confonds (mais rassures-toi, tu n'es pas le seul), un attribut HTML et une propriété JavaScript !

Lorsque ta page se construit, l'interpréteur JavaScript construit une représentation de celle-ci sous forme d'arbre : le DOM. Chaque balise connue et ses attributs standards sont donc associés à des objets JavaScript, ce qui te permet par exemple d'écrire

Code :

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

mylist.options[mylist.selectedIndex].value

mais les attributs HTML personnalisés ne correspondent pas à des propriétés automatiques de l'objet JavaScript, il faut donc passer par la méthode getAttribute() :

Code :

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

mylist.options[mylist.selectedIndex].getAttribute('attr_perso')

[artistenherbe]

Merci de vos réponses,

@muchos : class ou id... je me trompe peut-etre, mais je les utilise pour le css.
(c'est vrai que pour id c'est un peu confus...)

@Bovino :
OK merci de tes explications précises !
Effectivement, j'ai des bonnes carences en dev car j'ai appris tout seul et sur le tas.
Donc en effet tu m'as bien cerné, et en plus je connais mal javascript.
Il faut effectivement que je revois comment est construit une page web entre le DOM et javascript...

Je vais de ce pas me chercher des bon lien pour mieux comprendre.

Sinon en ce qui concerne mon soucis, je l'avais contourné en utilisant ce javascript (qu'un amis m'a transformé en fonction car c'est pas non plus mon fort les fonctions...., merci aussi a lui)

Une petite fonction des fois plutôt que 20 copier coller :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
for(var i = 0; i < 20; i++) {
    //-- INPUT
    O_Input[i] = document.createElement( 'INPUT');
    //-- Ajout
    O_Dest.appendChild( O_Input[i]);
    //-- Affectation Name et ID
    O_Input[i].id    = 'champ' + i + '_' +Num;
    O_Input[i].name  = 'champ' + i + '_' +Num;
    O_Dest.appendChild( document.createElement('BR'));
 
    O_Input[i].value = Tab[i]; 
}

Donc pour ma part, le sujet est en voie de résolution...
j'attend un peu voir si d'autre personnes interviennent.