11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Rollover sur balise option.

Hello.

J'ai besoin d'afficher un petit visuel de background contextuel lors de la sélection d'une <option> dans un <select>.
J'étais parti sur 
<p>
	<label for="bla">Truc</label>
	<select name="bla" id="bla">
		<option value="0">Machin</option>
		<option value="1">Autre machin</option>
		<option value="2">Un dernier machin pour la route</option>
	</select>
</p>
var $select = $("#bla"),
	$container = select.closest("p");
	
$select.on('mouseover, keyup', 'option', function () {
	var val = $(this).attr('val');	
	//Changement de la classe de $container selon pleins de trucs
});


Mais souci, Chrome et IE ne déclenchent aucun événement sur les <option>.

J'aurais bien la possibilité de binder un keypress et un mousemove au niveau du <select>, mais le mousemove est déclenché un milliard de fois, ce que je trouve loin d'être satisfaisant.

Si quelqu'un a une idée, merci d'avance.
Coucou.

Je pense que le plus simple pour que les événements fonctionnent partout est de générer une div remplaçant le select, et des span enfants pour remplacer les enfants (par exemple).
J'avais pensé à cette solution, mais je suis moyennement fan, pour des raisons d'accessibilité, de simuler les select de la sorte ; sans compter la galère pour que le design soit le même que les autres éléments d'UI natif.

Je suis en train de regarder pour attacher le handler au niveau du select, avec un throttle pour le coup du mousemove.
salut !

Ouai moi non plus j arrive pas, je comprend pas ..... il reconnait pas les options, j ai trouvé ca sur google


	function getSelectValue(selectId) {
		var elmt = document.getElementById(selectId);
		if(elmt.multiple == false){
			return elmt.options[elmt.selectedIndex].value;
		}
		var values = new Array();
		for(var i=0; i< elmt.options.length; i++){
			if(elmt.options[i].selected == true){
				values[values.length] = elmt.options[i].value; 
			}
		}	
		return values;	
	}


Mais j arrive pas a le faire marcher .......


Sinon y a ca aussi ....

<select name="monChamp" onchange="maFonctionQuiVaBien(this.options[this.selectedIndex].value)">
<option value="12">Douze</option>
<option value="14">Quatorze</option>
</select>


mais je sais pas ce que ca vaut vraiment ....[/i][/i]
Modifié par InfoGeo (20 Apr 2012 - 15:40)
Paolo: A moins que tu ne répondes à InfoGeo, mon souci est que je ne veux pas afficher sur le onChange, mais plutôt faire un rollover lors de la sélection (avant le click et le onChange).

InfoGeo: Désolé, je n'ai pas trop compris. Tu cherches à récupérer la valeur d'un select?
Ouaip ^^ comme toi ^^

En fait ce que je voudrais ce que au lieu d'avoir ca, que j'envoeis en ajax

postsales="type_data=Job&type_areaOUcountry=Learner_Country&nom_data=postsales&year=2011&month=all&areaOUcountry=";


Ou l'année est en dur et je la veux pas en dur, je veux que ca soit l'utilisateur qui choisisse, meme si au démarrage du site par defaut quoi, je mettrai 2011

Avoir quelque chose comme ca:

postsales="type_data=Job&type_areaOUcountry=Learner_Country&nom_data=postsales&year=" +  getSelectValue("select_year") + "&month=all&areaOUcountry=";


mais bon ....... relou ^^
Modifié par InfoGeo (20 Apr 2012 - 15:43)
InfoGeo a écrit :
Ouaip ^^ comme toi ^^
Sauf que ce n'est pas vraiment ce que je veux faire. Smiley sweatdrop Dans ton cas, regarde comme l'a suggéré Paolo du côté de l'événement onChange (ou change avec jQuery).

EDIT: Je modifie le titre du topic pour que ce soit plus explicite.
Modifié par Florian_R (20 Apr 2012 - 15:45)
bon ok je vais arreter de pourrir ton topic mais non c'est pas exactement ca, parce que la onchange moi je comprend que pour envoyer une valeur il faut qu il y ait une action de l utilisateur ...... Or moi je veux que ca soit tout le temps ..... qu'il y ait une action de l utilisateur ou non ..... qu'il regarde juste ce qui est sélectionner quoi ...

Franchement je pensais que ca serait facile mais c'est pas le cas ... avec je faisais du visual basic et je trovue que c'était mieux penser

bref

GL pour trouver ^^
Bonjour à toutes et à tous,

j'ai donnée une solution, tout en javascript, pour la manipulation des options d'un select et des fieldsets que l'on désire afficher ou masquer !

Voicl ma solution !

J'espère que cela peut répondre à vos questions !

@+
Salut

Pour ta question je crois qu'il n'admet pas d'autres solutions à part celle de construire un select personnalisé, comme ça tu auras le contrôle sur tes pseudo-options. Les options n'admettent pas les événement de souris et aussi les bloque qui les contient , à l'addition qu'on a pas le contrôle sur ce dernier, ce qui nous prives de faire recours aux coordonnées d'une option, et même qu'on ne peut pas en avoir. Alors je crois que la seule solution qui te reste et de personnaliser un select.

A+
unami a écrit :
Pour ta question je crois qu'il n'admet pas d'autres solutions à part celle de construire un select personnalisé, comme ça tu auras le contrôle sur tes pseudo-options.
Moi a écrit :
J'avais pensé à cette solution, mais je suis moyennement fan, pour des raisons d'accessibilité, de simuler les select de la sorte ; sans compter la galère pour que le design soit le même que les autres éléments d'UI natif.


Je peux le gérer au niveau du select sur événement clavier et mousemove, je cherchais juste une façon plus propre de faire, mais visiblement c'est mort.
Salut

Si tu es arrivé à un résultat, merci de le publier, ça m'intéresse vraiment, même si ce n'est pas propre à ton regard Smiley smile .
Par rapport à la question du clavier, oui je crois que c'est possible, toute fois pour le mouse je crois que c'est une question morte, à part le gentil Firefox Smiley cligne
Alors comme je disais, si tu es arrivé à une solution j'en suis preneur même si ce n'est pas vraiment complète.

a+
Modérateur
Florian_R a écrit :
Mon premier post est à ce point si peu clair? Smiley bawling Smiley bawling Smiley bawling Smiley bawling Smiley bawling

Bah ouais je me disais, ben onchange après ton premier post ^^

Je n'ai pas trouvé d'autre solution que le fake select dans une situation similaire, cependant:

Florian_R a écrit :
J'avais pensé à cette solution, mais je suis moyennement fan, pour des raisons d'accessibilité, de simuler les select de la sorte ; sans compter la galère pour que le design soit le même que les autres éléments d'UI natif.

C'est plutôt un avantage, les select étant tellement différents d'un navigateur/os à l'autre. Comparé à d'autres éléments et non customizable. Pour l'accessibilité, ça ne pose pas trop de problèmes si c'est bien fait.
Bonjour Florian_R,

je suis comme les autres intervenants, je n'ai pas bien compris ce que tu veux faire.
Tu nous donnes en exemple un select et tu voudrais lors d'un changement d'option de ce select, modifier le background de je ne sais pas quoi ?
Peux-tu être un peu plus explicite, s'il te plait ?

Autre chose. Je programme qu'en javascript et je ne connais pas bien JQUERY.
Voici un exemple en Javascript :
<!doctype html>
<html>
<head>
<!-- ==== -->
<!-- Meta -->
<!-- ==== -->

<meta http-equiv="Content-Type"        content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type"  content="text/css" />

<title>test</title>

<!-- ========== -->
<!-- JavaScript -->
<!-- ========== -->

<script type="text/javascript">
window.onload = function ()
{
	couleur();

	document.getElementById("bla").onchange = function () { couleur(); }
}

function couleur()
{
	var id1 = document.getElementById("bla");
	var id2 = id1.options[id1.selectedIndex].value;
	document.getElementById("ecran").className = id2;
}
</script>

<!-- ====================== -->
<!-- Cascading Style Sheets -->
<!-- ====================== -->

<style rel="stylesheet" type="text/css">
body	{	background-color : grey;	}
.rouge	{	background-color : red;		}
.vert	{	background-color : green;	}
.bleue	{	background-color : blue;	}
.marron	{	background-color : maroon;	}
</style>
</head>

<body id="ecran">
	<select id="bla">
		<option value="rouge">couleur rouge</option>
		<option value="vert">couleur vert</option>
		<option value="bleue">couleur bleue</option>
		<option value="marron">couleur marron</option>
	</select>
</body>
</html>


@+
Modifié par Artemus24 (23 Apr 2012 - 19:42)
J'avais dû lâcher ce truc pour d'autres prios, je remonte donc le topic pour ceux que ça intéresserait.

J'ai testé la solution mousemove + keypress au niveau du select -> chou blanc, le selectedIndex n'est pas le bon, sauf dans FF.

Du coup, j'ai essayé de tenter une solution en CSS + des pseudos-éléments. Même topo, le sélecteur option:hover, option:focus ne semble pas pris en compte.

Donc, au final, ça sera soit une suite de boutons radios avec un BG dans le label, soit un sélect customisé en JS comme supposé par _mlb (avec arrachage de cheveux en perspective pour conserver le même style que les select par défaut).

En tous cas, merci pour les suggestions.
Salut

@Florian_R,

Rajouter un attribut size="3" par exemple à la balise select va rétablir les évènements mouseover sur les options pour Chrome… mais hélas, cela modifie aussi un peu l’apparence de la liste ; je ne sais pas si c’est problématique pour toi (en général on peut s’en arranger s’il n’y a pas trop d’options).

Exemple : http://jsfiddle.net/3DUuU/18/

Pour IE… je ne sais pas si cela fonctionne et je n’ai pas de IE pour tester.
Modifié par Jules-F (15 May 2012 - 23:37)
Merci Jules-F pour l'info.

Ce comportement est pour le moins étrange. Je n'ai pas testé sous IE, mais pour être certain que rien ne pète avec une future mise à jour, je vais rester sur la solution select émulé via JS, même si c'est un poil moche.
Sujet clos
Aller à