マルチレベルメニューカスケード
4554 ワード
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を使用しています.拡張関連コンテンツが無限レベルのドロップダウン・メニュー関連をサポートできる限り.