`

多级菜单级联

 
阅读更多
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。只要扩充相关内容可以支持无限级下拉菜单关联。
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics