11550 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Afficher le "value" et le "texte" de la b

Bonjour à vous !

Je dispose d'une liste déroulante qui doit m'avertir de deux choses :
- la valeur de l'attribut "value" de la balise "option"
- le "texte" contenu dans la balise "option"

Problème : il me retourne le bon "value" mais pas le bon "texte"... Il y a un décalage qui se créé sans que je comprenne pourquoi...

Voici mon code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title></title>
	</head>
	<body>
		<form>
			<select name="select_name" onchange="alert(this.value+', '+this.options[this.value].text);">
				<option value="1">Valeur 1</option>
				<option value="2">Valeur 2</option>
				<option value="3">Valeur 3</option>
				<option value="4">Valeur 4</option>
				<option value="5">Valeur 5</option>
				<option value="6">Valeur 6</option>
				<option value="7">Valeur 7</option>
				<option value="8">Valeur 8</option>
			</select>
		</form>
	</body>
</html>
Merci d'avance !

edit: Modif. du titre
Modifié par Alphonse (26 Aug 2009 - 16:42)
Salut,

Si tu pouvais nous donner ton JS et les messages qu'il te retourne, ça pourrait nous aider Smiley cligne
Tout est dans le code ! Il n'y a qu'à constater le contenu de l'alerte javascript qui apparaît lorsque tu sélectionnes une option...

Si on supprime la ligne <option value="1">Valeur 1</option>, le décalage sera de deux positions... Je ne comprends pas comment javascript interprète mon this.options[this.value].text
C'est normal et c'est tout bête, en fait ton index de talbeau contenant les options commence à 0 et pas à 1 Smiley cligne
Donc il faut faire '-1' à ta value pour avoir le bon index Smiley cligne 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <head> 
        <title></title> 
    </head> 
    <body> 
        <form> 
            <select name="select_name" onchange="alert(this.value+', '+this.options[this.value-1].text);"> 
                <option value="1">Valeur 1</option> 
                <option value="2">Valeur 2</option> 
                <option value="3">Valeur 3</option> 
                <option value="4">Valeur 4</option> 
                <option value="5">Valeur 5</option> 
                <option value="6">Valeur 6</option> 
                <option value="7">Valeur 7</option> 
                <option value="8">Valeur 8</option> 
            </select> 
        </form> 
    </body> 
</html>

Modifié par N-J (26 Aug 2009 - 16:24)
Ok, j'étais persuadé que "this.value" me retournait le contenu de l'attribut "value" et pas la valeur de l'index.

Du coup, comment récupérer le contenu de l'attribut "value" sélectionné ? Ainsi que son texte correspondant ?

Pour en revenir avec mon exemple, pourquoi le code suivant ne fonctionne pas ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title></title>
	</head>
	<body>
		<form>
			<select name="select_name" onchange="alert(this.value+', '+this.options[this.value].text);">
				<option value="21">Valeur 21</option>
				<option value="48">Valeur 48</option>
				<option value="65">Valeur 65</option>
				<option value="14">Valeur 14</option>
				<option value="45">Valeur 45</option>
				<option value="87">Valeur 87</option>
				<option value="52">Valeur 52</option>
				<option value="42">Valeur 42</option>
				<option value="12">Valeur 12</option>
				<option value="41">Valeur 41</option>
				<option value="15">Valeur 15</option>
				<option value="17">Valeur 17</option>
				<option value="46">Valeur 46</option>
			</select>
		</form>
	</body>
</html>
Normal tu tapes avec le value=21 au 22ème index de ton tableau alors que ce serait plutôt le 0ème que tu voudrais faire, utilises ce code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <head> 
        <title></title> 
    </head> 
    <body> 
        <form> 
            <select name="select_name" onchange="alert(this.value+', '+this.options[this.selectedIndex].text);"> 
                <option value="21">Valeur 21</option> 
                <option value="48">Valeur 48</option> 
                <option value="65">Valeur 65</option> 
                <option value="14">Valeur 14</option> 
                <option value="45">Valeur 45</option> 
                <option value="87">Valeur 87</option> 
                <option value="52">Valeur 52</option> 
                <option value="42">Valeur 42</option> 
                <option value="12">Valeur 12</option> 
                <option value="41">Valeur 41</option> 
                <option value="15">Valeur 15</option> 
                <option value="17">Valeur 17</option> 
                <option value="46">Valeur 46</option> 
            </select> 
        </form> 
    </body> 
</html>
Alphonse a écrit :
Ok, j'étais persuadé que "this.value" me retournait le contenu de l'attribut "value"

C'est le cas.

Ce que dit N-J (je te laisse relire...), c'est que ton select.options est un tableau JavaScript. Les numéros d'index d'un tableau JavaScript, comme dans la quasi-totalité des langages de programmation (que l'on parle de tableaux ou de listes ou autre type de données similaire) commencent à zéro.

Donc pour récupérer le texte du premier OPTION il faut faire:
document.getElementByName('select_name').options[0].text

Pour récupérer le texte du deuxième:
document.getElementByName('select_name').options[1].text

Et ainsi de suite.

Le problème, c'est que tes value commencent à 1, pas à zéro. Tu ne peux donc pas les utiliser directement comme valeur d'index. Il faut soit changer tes value, soit soustraire 1:
this.options[this.value-1].text


Edit: utiliser selectedIndex est plus mieux.
Modifié par Florent V. (26 Aug 2009 - 16:52)
Merci beaucoup ! En effet, j'avais COMPLETEMENT zappé le "selectedIndex" Smiley cligne

Je venais également à l'instant de résoudre mon problème de la manière suivante :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title></title>
	</head>
	<body>
		<form id="form_name">
			<select name="select_name" onchange="alert(document.forms['form_name'].elements['select_name'].options[document.forms['form_name'].elements['select_name'].selectedIndex].value+', '+document.forms['form_name'].elements['select_name'].options[document.forms['form_name'].elements['select_name'].selectedIndex].text);">
				<option value="21">Valeur 21</option>
				<option value="48">Valeur 48</option>
				<option value="65">Valeur 65</option>
				<option value="14">Valeur 14</option>
				<option value="45">Valeur 45</option>
				<option value="87">Valeur 87</option>
				<option value="52">Valeur 52</option>
				<option value="42">Valeur 42</option>
				<option value="12">Valeur 12</option>
				<option value="41">Valeur 41</option>
				<option value="15">Valeur 15</option>
				<option value="17">Valeur 17</option>
				<option value="46">Valeur 46</option>
			</select>
		</form>
	</body>
</html>
Il ne me restait plus qu'à utiliser le "this" à la place du chemin complet de l'élément HTML Smiley biggrin

edit: oups, j'avais copié/collé le mauvais code !
Modifié par Alphonse (26 Aug 2009 - 16:54)
J'allais oublié le plus important : merci ! Smiley cligne

edit: sujet résolu !
Modifié par Alphonse (26 Aug 2009 - 16:57)
Sujet clos
Aller à