Forum d'entraide PHPFrance

Venez poser vos questions PHP, MySQL, HTML5, CSS, Javascript, Gestion de serveurs à la communauté PHPfrance
https://forum.phpfrance.com/

diplay avec jquery

https://forum.phpfrance.com/viewtopic.php?f=7&t=270359

Page 1 sur 1

diplay avec jquery

Posté : 18 févr. 2014, 15:14
par pacphil
bonjour , je me demande avec jquery je suis pas un un grand spécialiste , et besoin d'être éclairer sur la mise en place sans DIV soit balise <P> ou autre merci d'avance de votre aide

[javascript]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<META name="description" content="Venez déposer votre petite annonce gratuitement.">
<link rel="stylesheet" media="screen" href="images/style.css" type="text/css">
<SCRIPT TYPE="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jq ... "></SCRIPT>
<SCRIPT TYPE="text/javascript" src="liste.js"></SCRIPT>
<SCRIPT TYPE="text/javascript" src="liste_liee.js"></SCRIPT>

<style>
.cacher
{
display:none;
}
</style>
</head>
<body>

<div id="divauto" class="cacher">


</div>

<div id="divmoto" class="cacher">


</div>

<SCRIPT>
$(function() {
$("#NOMSELECT").on("change", function() {
var idDiv = "#div" + $("#NOMSELECT").val();
$("div").hide();
$(idDiv).show();
});
});
</SCRIPT>

</body>
</html>[/javascript]

Re: diplay avec jquery

Posté : 18 févr. 2014, 18:28
par moogli
salut,

Faut être plus clair parce que la c'est incompréhensible :mrgreen:

au pif si #NOMSELECT est bien une liste déroulante, il faut que tu sélectionne l'index "sélectionné" ;)

@+

Re: diplay avec jquery

Posté : 18 févr. 2014, 18:34
par pacphil
Bonsoir le plus simple c'est de vous ajouter tous le script de A à Z le soucis c'est juste après la sélection de la marque la liste déroulante modèle devrais apparaître , le soucis la liste reste cacher , seule sans la fonction jquery ma liste liée est ok mais j'aimerais garder cette solution je recherche une idée .

Merci d'avance 
<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8" />
       <META name="description" content="Venez déposer votre petite annonce gratuitement."> 
       <link rel="stylesheet" media="screen" href="images/style.css" type="text/css"> 
<SCRIPT  TYPE="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></SCRIPT>
<SCRIPT  TYPE="text/javascript" src="liste.js"></SCRIPT>
<SCRIPT  TYPE="text/javascript" src="liste_liee.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
liste=new Array();
liste[0] = new Array("&laquo;Choisissez le d&eacute;partement&raquo;");
liste[1] = new Array("Anvers","Malines","Turnhout");
liste[2] = new Array("Hal-Vilvorde","Louvain");
liste[3] = new Array("Wavre","Nivelles");
liste[4] = new Array("Anderlecht","Auderghem","Bruxelles","Etterbeek","Evere","Forest","Ganshoren","Ixelles","Jette","Koekelberg","Molenbeek-Saint-Jean",
                     "Saint-Gilles","Saint-Josse-ten-Noode","Schaerbeek","Uccle","Watermael-Boitsfort","Woluwe-Saint-Lambert","Woluwe-Saint-Pierre");
liste[5] = new Array("Bruges","Courtrai","Dixmude","Furnes","Ostende","Roulers","Tielt","Ypres");
liste[6] = new Array("Alost","Audenarde","Eeklo","Gand","Saint-Nicolas","Termonde");
liste[7] = new Array("Ath","Charleroi","Mons","Mouscron","Soignies","Thuin","Tournai");
liste[8] = new Array("Huy","Liège","Verviers","Waremme");
liste[9] = new Array("Hasselt","Maaseik","Tongres");
liste[10] = new Array("Arlon","Bastogne","Marche-en-Famenne","Neufchâteau","Virton");
liste[11] = new Array("Dinant","Namur","Philippeville");

function changeliste()
{
choix=document.getElementById("province").value;
t='<SELECT id="region" name="region" style="width:200px;" class="formchamp">';
for(i=0;i<liste[choix].length;i++)
{
t+="<option value=\""+liste[choix][i]+"\">"+liste[choix][i]+"</option>";
}
document.getElementById("region_div").innerHTML=t+'</select>';
}

</SCRIPT>
        <style>
        .cacher 
        { 
            display:none; 
        }
        </style>
    </head>
<body>
<FORM>
 <label for="cat">Catégorie : </label> 
<select id="NOMSELECT" name="categoriemoteur" style="width:150px"> 

<optgroup label=Véhicule>
<option value="null">Choisissez votre Catégorie</option>
<option value="auto">Voiture</option>
<option value="moto"> Moto</option>
<option value="bateau"> Bateau</option>
<option value="caravane"> Caravane</option>
<option value="remorque"> Remorque</option>  
<option value="jet-ski"> Jet ski</option> 
<option value="agricole"> Agricole </optgroup>

<optgroup label=Immobilier> 
<option value="vente-maison"> Vente maison</option>
<option value="appartement"> Appartement</option> 
<option value="location"> Location</option>
<option value="terrain"> Terrain</option>
<option value="etang"> Etang</option>  
<option value="mobil-home"> Mobil Home </optgroup>

<optgroup label=Multimédia> 
<option value="informatique"> Informatique</option>
<option value="telephonie"> Téléphonie </option> 
<option value="television"> Télévision</option>  
<option value="chaine-hifi"> Chaine hifi</option>  
<option value="jeu-video"> Jeu vidé©o</option>  
<option value="dvd-film"> Dvd film </option> 
<option value="livre"> Livre</option>  
<option value="musique"> Musique</option> 
<option value="photo-video"> Photo & Vidéo </optgroup> 

<optgroup label=Maison> 
<option value="electromenager"> Electroménager</option> 
<option value="ameublement"> Ameublement</option>
<option value="decoration"> Dé©coration</option>
<option value="bricolage"> Bricolage</option>
<option value="jardinage"> Jardinage</option>
<option value="bijoux"> Bijoux</option> 
<option value="equipement-bebe"> Equipement bébé</option>
<option value="vetement"> Vétements & Accessoires</optgroup>

<optgroup label=Divers> 
<option value="chien"> Chien </option>
<option value="chat"> Chat </option>
<option value="emploi"> Emploi </option>
<option value="service"> Service</option>
<option value="jouet"> Jouet</option>
<option value="billetterie"> Billetterie</option>
<option value="voyage"> Voyage</option> 
<option value="autre"> Autre</optgroup>
</select> 

                
<label for="region">Province : </label>   
<A>
<select id="province" onChange="changeliste()" name="province"  style="width:150px"  class='formchamp'>
<OPTION value='' >Choisissez la Province</OPTION> 
<option value=1 >Anvers</option> 
<option value=2 >Brabant Flamand</option> 
<option value=3 >Brabant Wallon</option> 
<option value=4 >Bruxelles</option> 
<option value=5 >Flandre occidentale</option> 
<option value=6 >Flandre orientale</option> 
<option value=7 >Hainaut</option> 
<option value=8 >Liège</option> 
<option value=9 >Limbourg</option> 
<option value=10 >Luxembourg</option> 
<option value=11 >Namur</option> 
</select></A>
<label for="region">Région : </label> 
<A id=region_div ><SELECT id="region" name="region" style="width:150px"  class='formchamp'> 
<OPTION value='' >Choisissez de la région</OPTION></SELECT></A>             
     
        <div id="divauto" class="cacher">
				<label>Marques</label>
				<select name='marque' id='marque' onchange='go()'>
					<option value='-1'>Choisir la marque</option>
					<?PHP
					
					include'require/config1.php';
					
						$reponse = $connection->prepare('SELECT id, nom FROM marque ORDER BY nom');
						$reponse->execute(array());
                        while($result = $reponse->fetch(PDO::FETCH_OBJ)){
							$id = $result->id; $nom = $result->nom;
							echo "<option value=".$id.">".$nom."</option>";
						}
												
					?>
				</select>
				<label>Modèle</label>
				<div id='modele' style='diplay:inlinde'> 
				<select  name='modele'>
					<option value='-1'>Choisir le modèle</option>
				</select>
				</div>

        </div>
  
        <div id="divmoto" class="cacher">
<select name="marque_moto">
<option  value=492>APC</option>
<option  value=307>Aprilia</option>
<option  value=309>Benelli</option>
<option  value=310>Beta</option>
<option  value=123>BMW</option>
<option  value=313>Bombardier</option>
<option  value=314>Buell</option>
<option  value=315>Cagiva</option>
<option  value=407>Can-Am</option>
<option  value=447>CFMOTO</option>
<option  value=317>Derbi</option>
<option  value=319>Ducati</option>
<option  value=321>Gas-Gas</option>
<option  value=322>Gilera</option>
<option  value=324>Harley Davidson</option>
<option  value=482>Hellbound</option>
<option  value=138>Honda</option>
<option  value=326>Husaberg</option>
<option  value=328>Hyosung</option>
<option  value=487>Indian</option>
<option  value=331>Kawasaki</option>
<option  value=376>Keeway</option>
<option  value=333>KTM</option>
<option  value=334>Kymco</option>
<option  value=336>LML</option>
<option  value=339>MBK</option>
<option  value=342>Moto Guzzi</option>
<option  value=341>MV Agusta</option>
<option  value=159>Peugeot</option>
<option  value=250>PGO</option>
<option  value=347>Piaggio</option>
<option  value=348>Polaris</option>
<option  value=396>Razzo</option>
<option  value=350>Rewaco</option>
<option  value=354>Skyteam</option>
<option  value=170>Suzuki</option>
<option  value=357>SYM</option>
<option  value=381>TGB</option>
<option  value=223>Triumph</option>
<option  value=502>Ultra</option>
<option  value=360>Vespa</option>
<option  value=363>Yamaha</option>
</select>

<select name="type_moto">
<option  value='M1'>Mobilette</option>
<option  value='M2'>Scotter</option>
<option  value='M3'>Touring</option>
<option  value='M4'>Sport</option>
<option  value='M5'>Enduro</option>
<option  value='M6'>Supermotard</option>
<option  value='M7'>Chopper</option>
<option  value='M8'>Trial</option>
<option  value='M9'>Quad</option>
</select>

        </div>
       
        <SCRIPT>
        $(function() {
            $("#NOMSELECT").on("change", function() {
                var idDiv = "#div" + $("#NOMSELECT").val();
                $("div").hide();
                $(idDiv).show();
            });
        });
        </SCRIPT>
 
    </body>
</html>
Heures au format UTC+02:00
Page 1 sur 1
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/