多级菜单级联

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。只要扩充相关内容可以支持无限级下拉菜单关联。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值