Attribut onChange() sur un select

Version imprimable

08/10/2014, 13h49
stefde3

Attribut onChange() sur un select

Bonjour à toute la communauté,

Voilà quel est mon soucis.

Je trouve plein de codes pour afficher "une" div selon si on sélectionne une option dans le select mais ce n'est pas vraiment ce que je recherche.

Je cherche plus à afficher différentes div selon les options choisies.

Chaque option affichera une div différente avec un contenu différent.

Je m'explique dans mon select j'ai plusieurs options :

- Piller ce domaine
- Assiéger ce domaine
- Lancer un assaut sur ce domaine
- Déplacer mes troupes sur ce domaine
- Espionner ce domaine

et selon l'option choisie, se ne sera pas le même cadre qui s'affichera en-dessous.

Car les troupes à envoyer ne seront pas les mêmes donc j'aimerai avoir une solution à cela mais j'ai beau chercher, je ne trouve que des scripts qui affiche une seule div sur un changement avec donc, une seule fonction appelée.

A moins qu'il soit possible de mettre une ID à chaque option et le onChange() sur chacune des options mais ne connaissant pas bien le jQuery et le JS, je préfère avoir les bonnes infos que d'y aller à taton pendant des heures ^^

Merci de m'orienter vers une solution car là je cale un peu ^^
08/10/2014, 14h01
SpaceFrog

passe par une attribution / suppression de class sur tes divs
avec une class visible et une class hidden

sur le .change() du select en fonction du val() du select (ou data-sur le option:selected) tu attribues les bonnes class aux divs.
08/10/2014, 15h19
stefde3

val() = value de l'option j'imagine ?

je préférerai partir sur un display:block ou un display:none plutôt que visibility.

avec un effet de slide pour faire apparaître la div du dessous.

cela-dit, je ne vois pas ce que tu veux dire par "Attribution / suppression" désolé j esuis une vraie bille mais j'essaye de comprendre le fonctionnement du JS en ce moment

Aurais-tu un schema rapide d'exemple à me montrer stp ?
08/10/2014, 15h33
SpaceFrog

http://jsfiddle.net/rwoz672a/
08/10/2014, 16h11
stefde3

Parfait !!! merci ^^

http://jsfiddle.net/rwoz672a/1/

Maintenant j'ai une autre question qui a son importance...

je passe par un système de champs select généré par jQuery et en fait il transforme automatiquement mes balises <options> en <ul><li><a href="#"></a></li></ul>

Est-ce que cela peut empêcher le bon déroulement des opérations si j'ajoute ce code ?
08/10/2014, 16h15
SpaceFrog

ben vu que les balises li ou a n'ont pas de value ... pense à recupérer le value des options pour les passer en href des a ou en data- de tes li poru connaitre le div cible lors du click (du coup plus de onchange)
08/10/2014, 16h39
stefde3

ouais j'affiche une ancre alors en fait genre : #pillage du coup j'ai juste à faire ça en css avec un :target mais ça risque de ne pas fonctionner sous les anciens navigateurs...

en fait ce qui est chiant c'est de pouvoir styliser un champs select mais de ne pas pouvoir lancer les attributs de base qu'on pourrait faire si y avait pas cette transformation des options en li a se serait quand plus simple...

donc du coup je m'y prends comment pour arranger ça ?

En bas de mon navigateur j'ai un lien qui apparaît quand je passe la souris sur l'option du genre :

http://monsite/beta/game/pillage

Ah oui et le problème est que je n'ai pas les balises <ul><li> dans mon code d'origine moi j'ai bien un select avec ses options...

pour infos j'utilise snoupix ShinyForm voilà

Donc quelle manipulation de dois effectuer pour afficher les div selon les li a cliqués vu que je ne les ai pas d'apparent sur mes codes ?
08/10/2014, 17h02
SpaceFrog

là j'ai pas mis le ul en forme ...
mais les actions sont répercutées ...

L'idée est de créer un ul et de le peupler avec des li en parcourant les options en leur attribuant les bone data-valeurs
j'insère ensuite l'ul après le select et je masque le select

je repercute les click sur les ul et selectionnant l'option correspondant puis en declenchant le change du select

http://jsfiddle.net/rwoz672a/4/

Houlà alors là on rentre dans le coeur du problème ... pour moi c'est de l'hebreu à mon niveau.

En décomposant le fichier que j'ai voici la partie qui correspond au select :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
if(b.is("select")){
	b.wrap('<div class="shinyform_select shinyform"></div>');
	b.hide();
	var c=b.parent(".shinyform_select");
	c.addClass(b.attr("class"));
	c.append('<span class="shinyform_select_name"></span><span class="shinyform_select_button"></span>');
	var m=a(".shinyform_select_name",c),i=a(".shinyform_select_button, .shinyform_select_name",c),f=0,n=b.find("option").length;
	if(1<n){
		c.append('<ul class="shinyform_select_list"></ul>');
		for(var g=a(".shinyform_select_list",c),e=0;e<n;e++)g.append('<li><a href="#'+b.find("option").eq(e).val()+'">'+b.find("option").eq(e).text()+"</a></li>"),b.find("option").eq(e).attr("selected")&&(f=e)
	}
	m.text(b.find("option").eq(f).text());
	g.hide();
	if(b.attr("disabled"))c.addClass("disabled");
	else{
		var p=function(){
			c.hasClass("open")?(a(".shinyform_select").removeClass("open"),a(".shinyform_select_list").hide()):(a(".shinyform_select").removeClass("open"),a(".shinyform_select_list").hide(),c.addClass("open"),g.slideDown(100)
		)};
		c.hover(function(){
			a(this).addClass("hover")
		},
		function(){
			a(this).removeClass("hover")
		});
		i.mousedown(function(){
			c.addClass("focus")
		});
		i.mouseup(function(){
			c.removeClass("focus")
		});
		i.click(function(){
			p()
		});
		g.find("a").click(function(){
			f=g.find("a").index(a(this));
			c.find("select option").eq(f).attr("selected","selected");
			m.text(b.find("option").eq(f).text());
			p();
			return!1
		});
		a("body").click(function(){
			a(".shinyform_select").removeClass("open");
			a(".shinyform_select_list").hide()
		});
		i.click(function(a){
			a.stopPropagation()
		})
	}
}

j'ai déjà ajouté un "#" dans le <a href> mais alors dans ce cas, puis-je ajouter la fonction: onClick dedans et comment nommer la variable par rapport à ma div à appeler ?

Bon j'ai trouvé une solution un peu crado mais qui fonctionne.

à la ligne :

Code:

1
2
3
4
if(1<n){
		c.append('<ul class="shinyform_select_list"></ul>');
		for(var g=a(".shinyform_select_list",c),e=0;e<n;e++)g.append('<li><a href="#'+b.find("option").eq(e).val()+'">'+b.find("option").eq(e).text()+"</a></li>"),b.find("option").eq(e).attr("selected")&&(f=e)
	}

j el'ai modifié en ajoutant à la fin du <a> ceci:

Code:

onClick="show'+b.find("option").eq(e).val()+'();"

et ensuite j'ai fais une function par nom... ce qui fait un peu fouilli mais voilà le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
<script>
function shownone() {
		$('#assaut').hide(500);
		$('#pillage').hide(500);
		$('#siege').hide(500);
		$('#espionnage').hide(500);
		$('#deplacement').hide(500);
	}
 
	function showassaut() {
		$('#assaut').slideDown();
		$('#pillage').hide(500);
		$('#siege').hide(500);
		$('#espionnage').hide(500);
		$('#deplacement').hide(500);
	}
 
	function showpillage() {
		$('#pillage').slideDown();
		$('#assaut').hide(500);
		$('#siege').hide(500);
		$('#espionnage').hide(500);
		$('#deplacement').hide(500);
	}
 
	function showsiege() {
		$('#siege').slideDown();
		$('#assaut').hide(500);
		$('#pillage').hide(500);
		$('#espionnage').hide(500);
		$('#deplacement').hide(500);
	}
 
	function showespionnage() {
		$('#espionnage').slideDown();
		$('#assaut').hide(500);
		$('#pillage').hide(500);
		$('#siege').hide(500);
		$('#deplacement').hide(500);
	}
 
	function showdeplacement() {
		$('#deplacement').slideDown();
		$('#assaut').hide(500);
		$('#pillage').hide(500);
		$('#siege').hide(500);
		$('#espionnage').hide(500);
	}
</script>

voilà je sais pas si y a moyen de faire mieux mais là pour le moment ça fonctionne. :)

je mets donc en résolu mais vous pouvez toujours ajouter des comments pour m'aider à améliorer ce dernier code ^^