° ADSL © Bul ° Août 2007 °

À propos Des Select Liés Quitter l'Application

On voit de nombreuses questions sur la gestion de listes déroulantes liées.

C'est à dire, le choix d'une option dans la 1ère liste, entraîne des possibilités

différentes dans la 2ème liste.

par exemple : des régions, et pour chacune, des départements.

Régions	Départements
Bretagne	Côtes-d'Armor
	Finistère
	Ille-et-Vilaine
	Morbihan
Centre	Cher
	Eure-et-Loire
	Indre
	Loiret
Nord-Pas-de-Calais	Nord
	Pas-de-Calais

~ En pur JavaScript ~

page HTML

		
<HTML>
<HEAD>
<TITLE>2 Selects dépendants en JavaScript</TITLE>
<script   type="text/javascript">
function gensel2()
{  s2.length=0;
	for ( var n=0; n<liste[s1.selectedIndex].length; n++ )
	{  s2.length++;
		s2.options[s2.length-1].text=liste[s1.selectedIndex][n];
	}
}
		

</script>
</HEAD>
<BODY>
<form    name="frm">

	<select  size=4
		name="sel1"
		id="sel1"
		onchange="gensel2();">
		<optgroup label="Régions">
			<option>Bretagne</option>
			<option>Centre</option>
			<option>Nord-Pas-de-Calais</option>
		</optgroup>
	</select>

	<select  size=4
		name="sel2"
		id="sel2">
		<optgroup label="Départements">
		</optgroup>
	</select>

</form>
<script   type="text/javascript">
var s1=document.getElementById("sel1");
var s2=document.getElementById("sel2");
var liste=new Array(
	new Array("Côtes-d'Armor","Finistère","Ille-et-Vilaine","Morbihan"),
	new Array("Cher","Eure-et-Loire","Indre","Indre-et-Loire","Loir-et-Cher","Loiret"),
	new Array("Nord","Pas-de-Calais")
);
		
</script>
</BODY>
</HTML>

~ En pur PHP ~


			on va créer une Base de Données.
			je sais, c'est un peu ridicule pour si peu de données, mais c'est pour l'exemple !

création de la Base de Données

		
<?php
   
	$co=mysql_connect("localhost","root","");
	$dbnom="ADSL";
	$db=mysql_select_db($dbnom,$co);
	//======================================
	//== création de la base de données  ==
	//==  pour les besoins de l'exemple  ==
	//=====================================
	mysql_create_db($dbnom);
	$db=mysql_select_db($dbnom,$co);
	mysql_query("CREATE TABLE tabl1
						( t1ind char(20) PRIMARY KEY ) ");
	mysql_query("CREATE TABLE tabl2
						(  t2t1ind char(20) not null,
							t2ind   char(20) not null,
							PRIMARY KEY( t2t1ind, t2ind )  ) ");
	//==============================================
	//== création pour le test des enrgts désirés ==
	//==============================================
	mysql_query("INSERT INTO tabl1 VALUES ('Bretagne')" );
	mysql_query("INSERT INTO tabl2 VALUES ('Bretagne','Côtes-d\'Armor')" );
	mysql_query("INSERT INTO tabl2 VALUES ('Bretagne','Finistère')" );
	mysql_query("INSERT INTO tabl2 VALUES ('Bretagne','Ille-et-Vilaine')" );
	mysql_query("INSERT INTO tabl2 VALUES ('Bretagne','Morbihan')" );
	mysql_query("INSERT INTO tabl1 VALUES ('Centre')" );
	mysql_query("INSERT INTO tabl2 VALUES ('Centre','Cher')" );
	mysql_query("INSERT INTO tabl2 VALUES ('Centre','Eure-et-Loire')" );
	mysql_query("INSERT INTO tabl2 VALUES ('Centre','Indre')" );
	mysql_query("INSERT INTO tabl2 VALUES ('Centre','Loiret')" );
	mysql_query("INSERT INTO tabl1 VALUES ('Nord-Pas-de-Calais')" );
	mysql_query("INSERT INTO tabl2 VALUES ('Nord-Pas-de-Calais','Nord')" );
	mysql_query("INSERT INTO tabl2 VALUES ('Nord-Pas-de-Calais','Pas-de-Calais')" );
		
?>

Le Script d'exploitation

		
	<form method="post">
		<select name="tb1" id="tb1"
				  size=3>
	<?php
   
	$co=mysql_connect("localhost","root","");
	$dbnom="ADSL";
	$db=mysql_select_db($dbnom,$co);
	//==========================================
	//== on affiche dans un select la TABLE 1 ==
	//==========================================
	$res=mysql_query("SELECT * FROM tabl1",$co);
	$max=@mysql_num_rows($res);
	for ($nb=0;$nb<$max;$nb++)
	{  $i=mysql_result($res,$nb,"t1ind");
		if ( isset($_POST["tb1"]) && $_POST["tb1"]==$i )
				$s=' selected';
		else $s='';
		echo '<option'.$s.' value="'.$i.'">'.$i.'</option>';
	}
   ?>
		</select>
	<?php
   
	if (isset($_POST["tb1"]))
	{  	//==========================================
		//== on affiche dans un select la TABLE 2 ==
		//==========================================
      <select name="tb2" id="tb2"
				  size=3>
		<?php
      
		$rch="WHERE t2t1ind='".$_POST["tb1"]."'";
		$res=mysql_query("SELECT * FROM tabl2 ".$rch,$co);
		$max=@mysql_num_rows($res);
		for ($nb=0;$nb<$max;$nb++)
		{  $i=mysql_result($res,$nb,"t2ind");
			echo '<option value="'.$i.'">'.$i.'</option>';
		}
      ?>
		</select>
		<?php
   }
	mysql_close($co);
   ?>
		<input type="submit" />
	</form>

~ avec AJAX ( PHP+JavaScript ) ~


						on utilise bien entendu la Base de Données de "en pur PHP"

la page qui gère les Select

		<?php

  $co=mysql_connect("localhost","root","");
  $dbnom="ADSL";
  $db=mysql_select_db($dbnom,$co);
  //==========================================
  //== on affiche dans un select la TABLE 1 ==
  //==========================================
  $res=mysql_query("SELECT * FROM tabl1",$co);
  $max=@mysql_num_rows($res);
		
?><script type="text/javascript">

function xmlhttp()
	{  var x;
		try         {	x = new ActiveXObject("Microsoft.XMLHTTP");   }
		catch (e)   {	try         {   x = new ActiveXObject("Msxml2.XMLHTTP");   }
						catch (e)   {	try         {   x = new XMLHttpRequest();   }
								catch (e)   {   x=false;   }
											}
						}
		return x;
	}
	function appel()
	{   var xml = xmlhttp();
		if(!xml)
			{   alert("XmlHttpRequest non supporté");   }
		else	{   xml.onreadystatechange = function()
					{   if(xml.readyState==4)
						{   var opt=xml.responseText.split("\t");
							 tb2.length=0;
							 for ( var n=1;n<opt.length;n++ )
							 {   tb2.length++;
								  tb2.options[tb2.length-1].text=opt[n];
							 }
						}
					}
				xml.open("GET", "Ajax2.php?tbl2="+tb1.options[tb1.selectedIndex].text, true);
				xml.send(null);
			}
	}
		  

	</script>
	<select	name="tb1" id="tb1"
			size="3"
			onchange='appel();'>
	<?php
   
	for ($nb=0;$nb<$max;$nb++)
	{  $i=mysql_result($res,$nb,"t1ind");
		echo '<option>'.$i.'</option>';
	}
			
?>       
		</select>
		<select	name="tb2" id="tb2"
			size="3">
		</select>
		<?php    
mysql_close($co);
?>

le script retourne les données à mettre dans la 2ème liste

		<?php

	header('Content-type:text/html;charset=ISO-8859-1');
	$co=mysql_connect("localhost","root","");
	$dbnom="ADSL";
	$db=mysql_select_db($dbnom,$co);
	$rch="WHERE t2t1ind='".$_GET["tbl2"]."'";
	$res=mysql_query("SELECT * FROM tabl2 ".$rch,$co);
	$max=@mysql_num_rows($res);
	$t="";
	for ($nb=0;$nb<$max;$nb++)
	{  $i=mysql_result($res,$nb,"t2ind");
		$t.="\t".$i;
	}
	echo $t;
	mysql_close($co);
?>