11546 sujets

JavaScript, DOM et API Web HTML5

Recuperer valeur de select

salut,

j'ai un champ select et je veux recuperer son valeur , voila le code :

<form id="form1" name="form1" method="post" action="">
<label>
<select name="select" id="select">
<option value="0">aa</option>
<option value="1">bb</option>
<option value="2">cc</option>
<option value="3">dd</option>
</select>
</label>
<label>
<input type="submit" name="button" id="button" value="Envoyer" onclick="alert(document.form1.select.value)" />
</label>
</form>

le resultat affiche les value 0 , 1 ... et moi je veux recupere aaa ,bbb ...
comment je peux le faire svp
Bonjour,

Déjà, il serait préférable de passer par un getElementById pour cibler ton SELECT. Si tu changes ton formulaire, tu as plus de chances que ton code JS continue à fonctionner.

Ensuite, la propriété value du SELECT te renvoie effectivement le contenu de l'attribut value pour l'élément OPTION sélectionné. Il y a aussi la propriété selectedIndex, qui te renvoie un entier correspondant au numéro d'indice de l'OPTION sélectionné (en partant de zéro). Enfin, pour un OPTION donné, la propriété text devrait te renvoyer le texte de l'élément.

Donc ça pourrait donner:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Test</title>
	<script type="text/javascript"><!--
	function get_current_option_text(select_id) {
		var select = document.getElementById(select_id);
		var options = select.getElementsByTagName('option');
		return options[select.selectedIndex].text;
	}
	function show_current_option_text(select_id, placeholder_id) {
		var text = get_current_option_text(select_id);
		var placeholder = document.getElementById(placeholder_id);
		placeholder.firstChild.nodeValue = text;
	}
	//--></script>
</head>
<body style="width: 500px; margin: 100px auto;">

<form method="post" action="#">
	<p>
		<select name="test" id="test">
			<option value="a">Option A</option>
			<option value="b">Option B</option>
			<option value="c">Option C</option>
			<option value="d">Option D</option>
		</select>
	</p>
</form>

<p>
	Le texte sélectionné est:
	<em id="placeholder" style="display: inline-block; min-width: 5em; margin-right: 10px;">inconnu</em>
	<button type="button" onclick="show_current_option_text('test', 'placeholder');">mettre à jour</button>
</p>

</body>
</html>
Sujet clos
Aller à