Contenu d'un div qui change en fonction du choix

Version imprimable

Bonjour,
voilà je voudrais faire quelque chose mais je ne sais pas trop comment m'y prendre et par où commencer.
En fait j'ai un div1 et un select1, un div2 et un select2, ... comme ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <div id="div1"></div> <div id="div2"></div> <select name="select1"> <option>...</option> ... <option>...</option> </select> <select name="select2"> <option>...</option> ... <option>...</option> </select>
Je voudrais qu'au moment ou je clique sur une option du select1, le contenu de la div 1 change pour afficher un contenu en rapport avec l'option choisit comme ceci : http://nsa20.casimages.com/img/2010/...1041299060.png

Je pense qu'en utilisant "innerHTML" de js on pourrait mais je n'arrive pas à partir et j'ai rien trouvé sur le net pour m'aider.
Sinon j'ai pensés le faire avec des include php qui "s'activeraient" ...

(Il y a un autre problème qui va se poser c'est que je compte créer un bouton "enregistrer" après tout cela avec 2 choix : enregistrement provisoire (cookies) ou enregistrement (connections membre), pour que la personne n'ai pas besoin de refaire les choix la prochaine fois.
Je pense bien que cette étape sera trop compliqué pour l'instant, mais je veux juste que ma base me permettre de faire ceci par la suite, voilà pourquoi j'ai pensais à utiliser du php.)

Merci.

19/11/2010, 16h04
voyageurdumonde

J'ai deja cherche pour faire cela afin de remplacer des Iframe mais il n'y a pas de solution. Tu peux par contre afficher/cacher le contenu d'une div mais pas le changer
19/11/2010, 16h45
theophile76

Citation:

Envoyé par voyageurdumonde

J'ai deja cherche pour faire cela afin de remplacer des Iframe mais il n'y a pas de solution. Tu peux par contre afficher/cacher le contenu d'une div mais pas le changer

Ok merci, j'y ai pensé, en utilisant des DIV en DISPLAY:NONE mais vue le nombre d'OPTION que j'ai dans mes SELECT ça me parait assez compliquer à gérer.
19/11/2010, 16h56
scourjean

AJAX non ?

Et après tu mets le contenu avec :

Code:

$("#div1").html();

Merci.

J'ai trouvé quelque chose de pas mal du coté de jquery, je vais voir ce que ça donne ^^:

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
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 	// le document est chargé
   $("a").click(function(){ 	// on selectionne tous les liens et on d�finit une action quand on clique dessus
	page=($(this).attr("href")); // on recuperer l' adresse du lien
	$.ajax({  // ajax
		url: page, // url de la page � charger
		cache: false, // pas de mise en cache
		success:function(html){ // si la requêté est un succès
			afficher(html);	    // on execute la fonction afficher(donnees)
		},
		error:function(XMLHttpRequest, textStatus, errorThrows){ // erreur durant la requete
		}
	});
	return false; // on desactive le lien
   });
});
 
function afficher(donnees){ // pour remplacer le contenu du div contenu
	$("#contenu").empty(); // on vide le div
	$("#contenu").append(donnees); // on met dans le div le r�sultat de la requete ajax
}
</script>
 
<a href="contenu1.html">contenu1.html</a>
 
<a href="contenu2.html">contenu2.html</a>
 
<div id="contenu">
	Contenu avant utilisation des liens
</div>

Par contre je ne comprend, il n'y a pas de php et je dois quand même passer par mon serveur wamp pour que ça fonctionne ?

20/11/2010, 08h46
theophile76

le problème avec ce code c'es qu'il ne fonctionne qu'avec un lien, et moi j'en cherche un qui fonctionnerais avec des OPTION de SELECT.

euh j'ai leger l'impression que tous le monde se prend grave la tete pour rien ?

Deja il serai souhaitable de savoir quelle somme d'info doit rentrer dans le div, si c'est tous une documentation avec de la mise en page etc, il faut utiliser jquery, sa sera plus simple et beaucoup plus rapide. Si ce n'est qu'une phrase je propose ceci :
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 <script> function DonneAuDivLaValeur(lavaleur,lediv) { //moi j'aurai tenté quelque chose comme sa //document.getElementById(lediv).innerHTML=lavaleur; //certes rapide mais c'est une methode un peu perieuse qui ne marche pas a tous les coups et qui n'est pas trés orthodoxe //on va plutot faire simple if(lediv=='div1') { document.getElementById('div1').innerHTML=lavaleur; } if(lediv=='div2') { document.getElementById('div2').innerHTML=lavaleur; } } <script> <div id="div1"></div> <div id="div2"></div> <select name="select1" onchange="DonneAuDivLaValeur(this.value,'div1')"> <option value="toto1div1">...</option> <select name="select2"onchange="DonneAuDivLaValeur(this.value,'div2')"> <option value="toto1div2">...</option>
La valeur est facultative.
J'ai pas testé le bout de code que je vient de faire, mais l'utilisant souvent je pense qu'il fonctionne ;)
Voilou c'est une possibilité, mais il y en a plein d'autre, plus evolutive surement.
J'espere que cela t'aidera :zoubi:
Bon courage

EDIT sinon tous connement :
Code:

1 2 3 4 5 6 <select name="select1" onchange="document.getElementById('div1').innerHTML=this.value"> <option value="toto1div1">...</option> <select name="select2" onchange="document.getElementById('div2').innerHTML=this.value"> <option value="toto1div2">...</option>
J'y avait pas pensé, mais c'est plus rapide, tous va dependre encore une fois des infos a rentrer dans le div

Salut,
j'ai eu pas mal de soucis ne m'y connaissant pas trop mais j'ai trouvé deux solutions : une en jquery
http://tutorialzine.com/2010/01/swee...uery-ajax-css/

et l'autre en js "simple" que j'utilise sur le site d'un pot : http://www.antoineb.fr/

le script en question :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
function showPane(id) {
  var e,i;
  var PID = "content"; // the id of the parent element
  var p = document.getElementById(PID); // parent element
  // loop through each of the childNodes of the parent element
  for (i=0; i<p.childNodes.length; i++) {
    e = p.childNodes[i];
    if (e.nodeType!=1) continue; // pass over non-element nodes
    if (e.getAttribute("id") == id) {
      e.style.display = "block";
    }
    else {
      e.style.display = "none";
    }
  }
}
 
 
</script>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<a href="#accueil" onclick="showPane('accueil')">accueil</a>
<a href="#accueil" onclick="showPane('univers')">univers</a>
<div id="content">

    <div id="accueil">
              contenu div accueil 
    </div>

    <a name="univers"></a> pour y accéder par le lien de ton menu

    <div id="univers">

              contenu div univers 

    </div>
</div>

en espérant avoir aidé.;)

Citation:

Envoyé par brisso

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
function showPane(id) {
  var e,i;
  var PID = "content"; // the id of the parent element
  var p = document.getElementById(PID); // parent element
  // loop through each of the childNodes of the parent element
  for (i=0; i<p.childNodes.length; i++) {
    e = p.childNodes[i];
    if (e.nodeType!=1) continue; // pass over non-element nodes
    if (e.getAttribute("id") == id) {
      e.style.display = "block";
    }
    else {
      e.style.display = "none";
    }
  }
}
 
 
</script>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<a href="#accueil" onclick="showPane('accueil')">accueil</a>
<a href="#accueil" onclick="showPane('univers')">univers</a>
<div id="content">

    <div id="accueil">
              contenu div accueil 
    </div>

    <a name="univers"></a> pour y accéder par le lien de ton menu

    <div id="univers">

              contenu div univers 

    </div>
</div>

en espérant avoir aidé.;)

Bonjour,

Ce petit bout de code correspond bien à mon besoin, seulement j'ai un petit problème. En effet lors du premier affichage les deux div sont affichées.

Existe-t-il un remède?
Cordialement.

17/01/2011, 17h35
vermine

Bonjour,

Oui drOoops, le plus simple dans ce cas-ci est de l'écrire directement en HTML :

Code:

<div id="univers" style="display:none">
17/01/2011, 17h40
drOoops

Super, merci beaucoup.

Bonne soirée.