php:
html:
环境了是thinkphp,使用了 jquery。只要扩充相关内容可以支持无限级下拉菜单关联。
$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。只要扩充相关内容可以支持无限级下拉菜单关联。