Hello world!

je tiens à vous préciser que je suis une grosse buse en js, je ne fais habituellement que du php. -_-

je viens vers vous car j'aurai besoin d'une petite aide pour afficher une div selon la valeur selectionné dans une balise select.

j'ai essayé de faire un peu de js en cherchant sur le web, mais je crois que je fais un peu n'importe quoi, voila mon code.

function affichageDiv(liste) 
{
	$("liste option:selected").each(function () {
		var d=document.getElementById($(this).val());
		d.style.display="block";
	});
}  

<select name="monselect" onchange="javascript:affichageDiv(this)">
	<option value="1">option1</option>
	<option value="2">option2</option>
</select>

<div id="1" style="display:none">
	blabla1
</div>

<div id="2" style="display:none">
	blabla2
</div>

j’espère que vous y comprendrez quelque chose!

-
Edité par sublimema 18 juin 2014 à 12:46:36

Correction:

<select name="monselect">
    <option value="1">option1</option>
    <option value="2">option2</option>
</select>
 
<div id="ma_div_1" class="mes_divs" style="display:none">
    blabla1
</div>
 
<div id="ma_div_2" class="mes_divs" style="display:none">
    blabla2
</div>

// Je sélectionne le select et quand la valeur change on fait une action
$('select[name="monselect"]').change(function(){
    // Je créer l'id du div qui va être affiché
    var id = "ma_div_" + $(this).val();
    // Je cache toutes les divs grâce à une classe qui va sélectionner le tout
    $('div.mes_divs').hide();
    // Et j'affiche seulement le Div que je souhaite
    $('#'+id).show();
});

-
Edité par skuti 18 juin 2014 à 13:38:57

yes c'est niquel merci beaucoup!

J'avais le même problème que sublimena mais même avec ton code skuti sa fonctionne toujours pas.... j'ai sans doute pas bien remplacé dans le javascript

Fait voir ton code.

<div id="panneau_recherche_modele">
		<label id="Peugeot_combobox">
			<select>
			  <option selected> Choisissez un modèle : </option>
			  <option style="color:black;">--106--</option>
			  <option>106 (09/1991 - 03/1996)</option>
			  <option>106 - Restyling (03/1996 - 07/2003)</option>
			  <option style="color:black;">--306--</option>
			  <option>306 (N3) (02/1993 - 02/1997)</option>
			  <option>306 Cabriolet  (N3) (10/1993 - 02/1997)</option>
			  <option>306 II (N5) (03/1997 - 02/2002)</option>
			  <option>306 II Break/Estaten (N5) (04/1997 - 03/2002)</option>
			  <option>306 II Cabriolet (N5) (03/1997 - 09/2002)</option>
			  <option>306 II Sedan  (N5) (03/1997 - 02/2002)</option>
			  <option>306 Sedan (N3) (08/1994 - 02/1997)</option>
			  <option style="color:black;">--308--</option>
			  <option>308 3 Portes (09/2007 - Aujourd'hui)</option>
			  <option>308 5 Portes (09/2007 - Aujourd'hui)</option>
			  <option>308 Break (05/2008 - Aujourd'hui)</option>
			  <option>308 CC (03/2009 - Aujourd'hui)</option>
			  <option>308 II (07/2013 - Aujourd'hui)</option>
			  <option>308 SW (05/2008 - Aujourd'hui)</option>
			  <option style="color:black;">--309--</option>
			  <option>309 (09/1985 - 07/1989)</option>
			  <option>309 II (08/1989 - 08/1994)</option>
			  <option style="color:black;">--405--</option>
			  <option>405 - Restyling Berline (07/1992 - 10/1995)</option>
			  <option>405 - Restyling Break (07/1992 - 10/1996)</option>
			  <option>405 Berline (06/1987 - 06/1992)</option>
			  <option>405 Break (06/1988 - 06/1992)</option>
			  <option style="color:black;">--605--</option>
			  <option>605 (10/1989 - 06/1994)</option>
			  <option>605 - Restyling (07/1994 - 05/1999)</option>
			  <option style="color:black;">--1007--</option>
			  <option>1007 (04/2005 - 07/2010)</option>
			  <option style="color:black;">--Expert--</option>
			  <option>Expert (09/1995 - 12/2003)</option>
			  <option>Expert FL (01/2004 - 12/2006)</option>
			  <option>Expert II Teepee (01/2007 - Aujourd'hui)</option>
			  <option>Expert II VUL (01/2007 - Aujourd'hui)</option>
		</select>
	</label>
</div>

Pour chaque option que je vais choisir, une div lui sera affectée. Après il se peut aussi que

plusieurs options soient affectées à une même div

-
Edité par steph1101 19 juin 2014 à 14:39:52

Mais explique un peux plus ce que tu veux faire.

Oui mais tu veux dire quoi par "affecté"? Créé? Tu as déjà des div avec des id ou class précise et le contenu du select remplira la div?

en gros quand je vais cliquer sur admettons la 106 restyling, une div s'ouvrira à coté de la combobox. quand je recliquerais sur choisissez un modèle, la div se fermera. et je devrais pouvoir faire sa avec chaque modèle de voiture. pour te donner une idée, ma combobox se trouve à gauche de la page (elle prend à peu près 1/3 de celle ci) et la div affectée à chaque option se situera à droite de la combobox et prendra les deux autres tiers de la page

-
Edité par steph1101 19 juin 2014 à 14:58:56

Fait moi voir le code JS que tu as essayé de faire.

		function affichageDiv() 
		{
			var monselect = document.getElementById('monselect');
			var id = "ma_div_" + monselect.value;
			var objet = document.getElementById(id);
			
		}

j'ai repris le select et les div de sublimema pour plus de facilité (ils sont dans mon HTML)

Bah c'est exactement ça pour le JS mais si les <options> de ton <select> n'ont pas de valeurs, forcément monselect.value vaut NULL.

<div id="panneau_recherche_modele">
        <label id="Peugeot_combobox" onChange="affichageDiv()">
            <select id="monselect">
              <option value="0" selected> Choisissez un modèle : </option>
              <option value="1" style="color:black;">--106--</option>
              <option value="2">106 (09/1991 - 03/1996)</option>
              <option value="3">106 - Restyling (03/1996 - 07/2003)</option>
              <option value="4" style="color:black;">--306--</option>
              <option value="5">306 (N3) (02/1993 - 02/1997)</option>
              <option value="6">306 Cabriolet  (N3) (10/1993 - 02/1997)</option>
              <option value="7">306 II (N5) (03/1997 - 02/2002)</option>
              <option value="8">306 II Break/Estaten (N5) (04/1997 - 03/2002)</option>
              <!-- ect... -->
        </select>
    </label>
</div>

-
Edité par skuti 19 juin 2014 à 15:23:02

Super !! Merci skuti

bonjour

Bonjour,

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

• soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
• soit de créer un nouveau sujet décrivant votre propre contexte
• ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.