blog actif depuis 1431 jours.

retours d'expériences, codes sources, réflexions, humeurs... d'un webmaster

Mer.

Sept.

Manipulation des éléments select d'un formulaire avec jQuery

Howto jQuery des manipulations les plus courantes sur les éléments select d'un formulaire.

Quelques exemples pour une liste <select id="monSelect">

récupérer la valeur de l'élément sélectionné :

$('#monSelect option:selected').val();

récupérer le nom de l'élément sélectionné :

$('#monSelect option:selected').text();

supprimer l'élément sélectionné :

$('#monSelect option:selected').removeAttr('selected');

supprimer l'élément ayant la valeur 2 :

$('#monSelect option[value=2]').remove();

vérifier si un élément HTML ayant l'id 'monElement' est de type select :

$('#monElement').is('select');

sélection du premier élément de la liste:

$('#monSelect').get(0).selectedIndex = 0;

sélection de l'element ayant la valeur'val1'

$("#monSelect option[value='val1']").attr('selected','selected');

nombre d'éléments dans la liste :

$('#monSelect>option').length;

retourner l'index de l'élément sélectionné :

$("#monSelect option:selected").prevAll().size();

Commentaires

nombre d'éléments dans la liste :

si on a par exemple 2 listes d'id monselect contenant 3 options :
$('#monSelect>option').length;
renvoi 6 et non 3

comment récupérer le nomre d'elements d'une liste ?

20/10/2010

@MrDupond : l'id est un identifiant unique, il faut mettre un id différent pour chaque liste ou utiliser l'attribut class.
Si un selecteur récupère plusieurs éléments, il faut parcourir chaque élément avec each():

$(".monselect").each(function(){

});

20/10/2010

ce que je cherchais, merci

09/01/2011

Bonjour. J aimerais savoir comment on fait pour afficher un <div></div> apres avoir selectionné un <option></option> sinon le <div></div> est cahcé

17/04/2012

@anna : if ($('#monSelect option:selected').val() == 'valeurDeTest') $('#monDiv').show();
else $('#monDiv').hide();

17/04/2012

Ajouter un commentaire

romualb.com est sur Facebook

Petitchevalroux - les notes d'un dev php mysql
CERDAN Yohann - Blog d'un développeur PHP/TYPO3 http://www.ycerdan.fr/
LyRiXx Blog
Développeur Web à Grenoble