Liste déroulante en fonction d'une autre liste déroulante

moumouss82
Invité n'ayant pas de compte PHPfrance

08 août 2007, 09:13

Bonjour tout le monde, voila mon problème, je suis entrrain de créer un système d'article pour mon site et j'aimerais quand je rédige un article que quand je selectione une rubrique, lla liste des sous rubrique ce fasse toute seul (pour ne pas avoir toutes les sous rubriques)
voici mon code:
<html>

<head>
<title></title>
<script>
List = new Array();
function Remplir(valeur){
  var sel="";
  sel ="<select size='1' name='sousrubrique'>";
  // Parcourir le tableau
  for (var i=0;i<List.length;i++)
   {
     // tester si la ligne du tableau (Sous-catégorie) correspond à la valeur de la catéhorie
     if (List[i][1]==valeur)
     {
       // Ajouter une rubrique sous-catégorie au variable SEL
       sel= sel + "<option value="+List[i][0]+">"+List[i][2]+"</option>";
     }

   }
   sel =sel + "</select>";
   // Modifier le DIV scat par la nouvelle List à partir du variable SEL
   document.getElementBy'rubrique').innerHTML=sel;
}
</script>
</head>
<body>

<form method="POST" action="Ajout6.php3">
  <select size="1" name="rubrique" OnChange="Remplir(rubrique.value)">
<?php
// Paramètres de la Connexion à la base MYSQL
$user="xx";
$host="xx";
$password="xx";
$database="xx";
$i=0; // variable de test
$j=0; // variable pour garder la valeur du premier enregistrement catégorie pour l'affichage

$connexion = mysql_connect($host,$user,$password) or die ("Connexion au serveur impossible");

mysql_select_db($database,$connexion);

// Séléction de tous les enregistrements de la table Catégorie
$rq="Select * from rubrique order by id;";
$result= mysql_query ($rq) or die ("Select impossible");

while ($dt=mysql_fetch_row($result))
{
 // Remplir la liste déroulante des catégorie
 echo "\t\t<option value=".($dt[0]).">".($dt[1])."</option>";
 if ($i==0) { $j=$dt[0]; $i=1; } // garder la valeur du premier enregistrement
}

?>

</select><br><br>

<DIV id="scat">
<select size="1" name="sousrubrique">
</select>
</DIV>

<?php

// Séléction de tous les enregistrements de la table Sous-Catégorie
$rq="Select * from sousrubrique order by rubrique;";
$result= mysql_query ($rq) or die ("Select impossible");
// $i = initialise le variable i
$i=0;
while ($dt=mysql_fetch_row($result))
{
 // Remplir le tableau (array) en javascript
 // ex : List[1]=new Array (1,1,"Sous-catégorie 1");
 // ex : List[2]=new Array (2,1,"Sous-catégorie 2");
 echo "<script>List[".$i."] = new Array(".($dt[0]).",".($dt[1]).",'".($dt[2])."');</script>";
 $i=$i+1; // Incrémentation de $i
}
echo "<script>Remplir ($j); </script>"; // Remplir la deuxième liste de choix avec les données
                                        // des sous-catégories en utilisant la valeur j
?>
<br><br>
  <input type="submit" name="Send" value="Envoyer">
</form>

</body>

</html>
voici le code de mes 2 tables sql:

Code : Tout sélectionner

CREATE TABLE `rubrique` ( `id` int(11) NOT NULL auto_increment, `rubrique` varchar(250) collate utf8_unicode_ci NOT NULL, `contenu` text collate utf8_unicode_ci NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=3 ; CREATE TABLE `sousrubrique` ( `id` int(11) NOT NULL auto_increment, `sousrubrique` varchar(250) collate utf8_unicode_ci NOT NULL, `contenu` text collate utf8_unicode_ci NOT NULL, `rubrique` varchar(250) collate utf8_unicode_ci NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=2 ;

moumouss82
Invité n'ayant pas de compte PHPfrance

08 août 2007, 13:10

rubrique.php:
<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
		<script type='text/javascript'>
	 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
			
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('sousrubrique').innerHTML = leselect;
					}
				}

				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxsousrubrique.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('rubrique');
				idrubrique = sel.options[sel.selectedIndex].value;
				xhr.send("idrubrique="+idrubrique);
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Rubriques</label>
				<select name='rubrique' id='rubrique' onchange='go()'>
					<option value='-1'>Aucun</option>
					<?
						mysql_connect("localhost","xx","xx");
						mysql_select_db("xx");
						$res = mysql_query("SELECT * FROM rubrique ORDER BY id");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["id"]."'>".$row["rubrique"]."</option>";
						}
					?>
				</select>
				<label>Sous-rubriques</label>
				<div id='sous-rubrique' style='display:inline'>
				<select name='sousrubrique'>
					<option value='-1'>Choisir une sous-rubrique</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>
ajaxsousrubrique.php:
<?php
	echo "<select name='sousrubrique'>";
	if(isset($_POST["idrubrique"])){
		mysql_connect("xx","xx","xx");
		mysql_select_db("xx");
		$res = mysql_query("SELECT id,sousrubrique FROM sousrubrique 
			WHERE idrubrique=".$_POST["idrubrique"]." ORDER BY id");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["id"]."'>".$row["sousrubrique"]."</option>";
		}
	}
	echo "</select>";
?>
J'ai modifier la table sous rubrique, je lui ai ajouter un champ idrubrique.