Liste déroulante

Résolu/Fermé
hazem.abd Messages postés 6 Date d'inscription jeudi 2 juin 2011 Statut Membre Dernière intervention 12 juillet 2011 - 2 juin 2011 à 12:23
 alphon5o - 2 juin 2011 à 15:14
Bonjour, je suis nouveau sur ce site j'ai un probleme je voudrai que quelqu'un m'aide mon probleme est simple j' ai 2 listes de choix dont la premiere contient la listre de quelques marque et la seconde contient des modeles de chaque marque ,je veux qu'en selectionnant une marque j'aurais dans la seconde liste uniquement les modeles correspondent a cette marque et merci d' avance
voici le code:

<table align = "center" >

<tr>
<td align = "right" >N° d'Immatriculation : </td>
<td><input type = "text" name = "num_immatriculation"> </td>
</tr>

<tr>
<td align = "right">Marque : </td>

<td><select name="marque">
<option value="1"> Toyota</option>
<option value="2"> Mercedes</option>
</select>

</td>
</tr>

<tr>
<td align = "right">Modele :</td>
<td><select name="modele">
<optgroup label="Toyota">
<option value="avensis">Avensis</option>
<option value="corola"> Corola</option>
<option value="vx"> VX</option>
</optgroup>
<optgroup label="Mercedes">
<option value="190">190</option>
<option value="elegance"> Elegance</option>
<option value="cdi"> CDI</option>
</optgroup>
</select> </td>
</tr>


<tr>
<td align = "right" >Date de mise en circulation : </td>
<td><input type = "text" name = "date_m_c"> </td>
</tr>

<tr>
<td align = "right" >Identité du beneficiare : </td>
<td><input type = "text" name = "identite_ben"> </td>
</tr>

<tr>
<td align = "right" >Code piece : </td>
<td><input type = "text" name = "code_piece"> </td>
</tr>



<tr>
<td> </td>
<td >
<input type = "submit" value = "Valider" name = "valider">

<input type = "reset" value = "annuler" name = "Annuler">
</td>
</tr>


</table>




</form>



2 réponses

salut,
rajoute ce code javascript entre tes balises "head" de façon a obtenir ceci :
.... 
<head> 
..... 
..... 
<script type="text/javascript"> 
 function displayModeleChoisie(val){ 
  og = document.getElementsByTagName('optgroup'); 
  n = og.length; 
  i = 0; 
  while( i < n){ 
   og[i].style.display = 'none'; 
   i++; 
  } 
  og[val - 1].style.display = 'block';
  cd = og[val - 1].childNodes[0].innerHTML;
  og[val - 1].parentNode.value = cd;
 } 
</script> 
</head> 
<body> 
..... 
..... 
<!--  
ton code fourni en exemple ici  
et remplaçant <select name="marque">  par <select onchange="displayModeleChoisie(this.value);" name="marque"> 
--> 
..... 
..... 
</body> 
</html>

                
0
hazem.abd Messages postés 6 Date d'inscription jeudi 2 juin 2011 Statut Membre Dernière intervention 12 juillet 2011
2 juin 2011 à 13:21
merci mais ça ne marche pas avec moi ; est ce possible de faire ceci avec php j' ai essaye de faire comme suis mais le code ne marche pas toujours :
<?php
if(isset($_POST['marque']))
$marq=$_POST['marque'];

mysql_connect('localhost','root','');
mysql_select_db('evaluation_sinistre');

$req='select libelle_modele from modele,marque where marque.code_marque=modele.code_marque and marque.libelle_marque= "'.$marque.'" ';
$rep=mysql_query($req) or die(mysql_error());
while($data=mysql_fetch_array($rep)){
?>
<option ><?php echo $data["libelle_modele"]; ?>
</option>
<?php } ?>

</select>
0
oui c possible avec ajax!
essaye avec ce code :
<html>
  <head>
    <title>test</title>
        <script type="text/javascript">
        function $(tagid){
            return document.getElementById(tagid);
        }
        function getXHR(){
            if(window.XMLHttpRequest){
                return new XMLHttpRequest();
            }
            if(window.ActiveXObject){
                var names = [
                    "Msxml2.XMLHTTP.6.0",
                    "Msxml2.XMLHTTP.3.0",
                    "Msxml2.XMLHTTP",
                    "Microsoft.XMLHTTP"
                ];
                for (var i in names){
                    try{ return new ActiveXObject(names[i]);}
                    catch(e){}
                }
            }
            window.alert("Votre navigateur ne prend pas en charge l'objet XMLHttpRequest");
            return null;
        }		
	
		function chercherModeleChoisie(param){
            var xhr = getXHR();
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    switch(xhr.status){
                        case 200: // reponse positive
                            $('modele').innerHTML = xhr.responseText ;
                            break;
                        default: // les autres cas a traiter ici
							var myUrl = url.split('?');
                            $('modele').innerHTML = myUrl[0] + '  ' + xhr.status + ' '+ xhr.statusText + "<br />";
                            break;
                    }
                }
            };
            var marque = "marque=" + param;
            var url = 'handler.php' + '?t=' + new Date().getTime();
            xhr.open("POST",url,true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(marque);           	
		}
	</script>
  </head>
  <body>
  <div id="central">
    <div id="formulaire">
      <form>
	<table>
	  <tr>
	    <td align = "right" >N° d'Immatriculation : </td>
	    <td><input type = "text" name = "num_immatriculation"> </td> 
	  </tr>
	  <tr>
	    <td align = "right">Marque : </td>
	    <td>
	      <?php 
			require_once("variables.inc.php");
			mysql_connect($serveur,$user,$pass)  or 	die("erreur     de     connection     serveur     bdd		 ".mysql_error());
			mysql_select_db($mabase)                   or 			die(mysql_error());
			$query =  "SELECT id, marque  FROM ".$matable." ORDER BY marque;";
			$resultat        =       mysql_query($query)       or 			die(mysql_error());
			echo '<select name="marque" onchange="chercherModeleChoisie(\'this.value\')">';
			while($row = mysql_fetch_array($resultat)){
			  echo '<option value="'.$row['id'].'">'.$row['marque'].'</option>';
			}
			echo '</select>';
		 ?>
	      
	    </td> 
	  </tr>
	  <tr>
	    <td align = "right">Modele :</td>
	    <td id="modele"></td>
	  <tr>
	    <td align = "right" >Date de mise en circulation : </td>
	    <td><input type = "text" name = "date_m_c"> </td>
	  </tr>
	  <tr>
	    <td align = "right" >Identité du beneficiare : </td>
	    <td><input type = "text" name = "identite_ben"> </td>
	  </tr>
	  <tr>
	    <td align = "right" >Code piece : </td>
	    <td><input type = "text" name = "code_piece"> </td>
	  </tr>
	  <tr>
	    <td> </td>
	    <td >
	      <input type = "submit" value = "Valider" name = "valider">
	      <input type = "reset" value = "annuler" name = "Annuler">
	    </td>
	  </tr> 
	</table>
      </form>
    </div>
  </div>
</body>
</html>



et handler.php

<?php
$marque = (isset($_POST['marque']) && !empty($_POST['marque']))?$_POST['marque'] : die("parametre non fournie :)");

require_once("variables.inc.php");
mysql_connect($serveur,$user,$pass)  or die("erreur de connection serveur bdd ".mysql_error());
mysql_select_db($mabase) or die(mysql_error());
$req = "select libelle_modele from modele,marque where marque.code_marque = modele.code_marque and marque.libelle_marque = '".$marque."';";
$rep = mysql_query($req) or die(mysql_error()); 

$retour = '<select name="modele">';
while($row = mysql_fetch_array($rep)){
  $retour .=  '<option value="'.$row['libelle_modele'].'">'.$row['libelle_modele'].'</option>';
}
$retour .=  '</select>';
echo (!empty($retour))? $retour: 'aucune modele trouve';
?>
0