マルチレベルメニューカスケード

php:

$firstArray = array("0"=>"  ","1"=>"  ","2"=>"  ","3"=>"  ","4"=>"  ");
$this->assign('fOptions',$firstArray);

$secondArray = array("1"=>array(11=>"  ",12=>"  ",13=>"  "),
					 "2"=>array(24=>"   "),
					 "3"=>array(),
					 "4"=>array(41=>"  ",42=>"  ",43=>"  "),	
					);
					
$thiredArray = array("11"=>array(111=>"  ",112=>"  "),
					 "12"=>array(113=>"  "),
					 "13"=>array(115=>"    "),
					 "24"=>array(116=>"   "),	
					 "43"=>array(117=>"    "),	
					);			
						
	
$this->assign('secondJson',json_encode($secondArray));
$this->assign('thiredJson',json_encode($thiredArray));

//                   
$fSelectValue = intval($_GET['f_select']);
$sSelectValue = intval($_GET['s_select']);
$tSelectValue = intval($_GET['t_select']);
$this->assign('fSelectValue',$fSelectValue);
$this->assign('sSelectValue',$sSelectValue);
$this->assign('tSelectValue',$tSelectValue);

$this->display();

html:

<script src="/js/jquery.js" type="text/javascript"></script>


<form action="/article-index">

<select name="f_select" id="f_select" onchange="s_change(this.value)">
	<?php
	foreach($fOptions as $k=>$v){
		if($fSelectValue == $k)
			$selected = "selected";
		else 
			$selected = "";
		echo "<option {$selected} value='{$k}'>".$v."</option>";	
	}
	?>
</select>

<select name="s_select" id="s_select" onchange="t_change(this.value)">
</select>

<select name="t_select" id="t_select" >
</select>

<input type="submit" value="  "/>

</form>

<script>


var sSelectValue = <?php	echo $sSelectValue.";";	?>
var tSelectValue = <?php	echo $tSelectValue.";";	?>

var secondJson = <?php	echo $secondJson.";";	?>
var thiredJson = <?php	echo $thiredJson.";";	?>


function s_change(selectedId){
	
	$("#s_select").empty();
	$("#t_select").empty();
	$("#s_select").append("<option value='0' >  </option>"); 
	$("#t_select").append("<option value='0' >  </option>"); 
	//var fSelectValue=parseInt($("#f_select").val());
	if(selectedId>0){
		var lines = secondJson[selectedId];	
		for(i in lines){   
			if(i == sSelectValue)
				$("#s_select").append("<option selected value='"+i+"'>"+lines[i]+"</option>");        
			else
				$("#s_select").append("<option  value='"+i+"'>"+lines[i]+"</option>");
				
		} 
	}
}


function t_change(selectedId){
	
	$("#t_select").empty();
	$("#t_select").append("<option value='0' selected>  </option>"); 
	//var sSelectValue=parseInt($("#s_select").val());
	if(selectedId>0){
		var lines = thiredJson[selectedId];	
		for(i in lines){   
			
			if(i == tSelectValue)
				$("#t_select").append("<option selected value='"+i+"'>"+lines[i]+"</option>");     
			else
				$("#t_select").append("<option value='"+i+"'>"+lines[i]+"</option>");  
		} 
	}
}
s_change(<?php	echo $fSelectValue;	?>);
t_change(<?php	echo $sSelectValue;	?>);


</script>

環境はthinkphpでjqueryを使用しています.拡張関連コンテンツが無限レベルのドロップダウン・メニュー関連をサポートできる限り.