FAQ jQuery

FAQ jQueryConsultez toutes les FAQ

Nombre d'auteurs : 12, nombre de questions : 46, dernière mise à jour : 15 juin 2021

Sommaire→Les formulaires

Comment puis-je obtenir les paramètres de l'option choisie (select option) ?
Comment puis-je récupérer les valeurs sélectionnées de checkbox de même nom ?

Version PDF Version hors-ligne

Comment puis-je obtenir les paramètres de l'option choisie (select option) ?

[jQuery 1.4.2]

Chaque élément sélectionné possède deux paramètres :

1. La valeur :

Sélectionnez

$("#monID option:selected").val();

Le texte :

Sélectionnez

$("#monID option:selected").text();

Exemple, lorsque plusieurs options peuvent être sélectionnées :

Sélectionnez

$("#monID").change(function(){
	var monArray = [];
	var str = "";
 
	$("#monID option:selected").each(function(i, item){
		str = $(item).val() + " = " + $(item).text();
		monArray.push(str);
	});
 
	alert(monArray.join("\n"));
});

Créé le 1^er février 2011 par danielhagnoul

Comment puis-je récupérer les valeurs sélectionnées de checkbox de même nom ?

[jQuery 1.5]

Exemple :

Sélectionnez

<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; 
		font-size:medium; font-style:normal; font-weight:normal; line-height:normal; 
		letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; 
		background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
 
		<p id="count"></p>
 
		<p>checkbox newsletter : </p>
		<form>
			<input type="checkbox" name="newsletter" checked="checked" value="Hourly" />
			<input type="checkbox" name="newsletter" value="Daily" />
			<input type="checkbox" name="newsletter" value="Weekly" />
			<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
			<input type="checkbox" name="newsletter" value="Yearly" />
		</form>
 
		<p>checkbox check[] : </p>		
		<form>
			<input type='checkbox' name='check[]' value='one'/>
			<input type='checkbox' name='check[]' value='two'/>
			<input type='checkbox' name='check[]' value='three'/>
			<input type='checkbox' name='check[]' value='four'/>
			<input type='checkbox' name='check[]' value='five'/>
			<input type='checkbox' name='check[]' value='six'/>
			<input type='checkbox' name='check[]' value='seven'/>
			<input type='checkbox' name='check[]' value='eight'/>
			<input type='checkbox' name='check[]' value='nine'/>
			<input type='checkbox' name='check[]' value='ten'/>
		</form>
 
		<p id="values"></p>
 
	</div>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.min.js"></script>
	<script>				
		$(function(){
			function nameCheck(){
				var tab = [];
 
				$("input:checked[name='check[]']").each(function(){
					tab.push($(this).val());
				});
 
				$("#values").text("check[] = " + tab.join(', '));
 
				return false;
			}
 
			// Compter l'ensemble des éléments checked
			function countChecked() {
				var n = $("input:checked").length;
 
				$("#count").text(n + (n <= 1 ? " is" : " are") + " checked !");
			}
 
			countChecked();
 
			$(":checkbox").click(function(){
				countChecked();
				nameCheck();
			});			
		});
	</script>
</body>  
</html>

À noter que l'on pourrait aussi bien récupérer les id ou un array littéral avec les id en index. On peut aussi le décliner pour les select multiples avec selected au lieu de checked.

Créé le 1^er février 2011 par danielhagnoul, SpaceFrog

Lien : Comment puis-je obtenir les paramètres de l'option choisie (select option) ?

Version PDF Version hors-ligne

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2011 Developpez Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.