javascriptを使用したPHPの検索フォームに関して

Question

javascriptを使用したPHPの検索フォームに関して質問です。

親データの中から一つ選択すると子データが選択可能になり、子データの中から一つ選択すると孫データが選択可能になるという検索フォームを作っているのですが、動きはjavascriptで制御されています（冗長になるので下のコードは孫なしで記述しています）。

各value値を次頁にGETで渡した際に子、及び孫の検索フォームの値を保持させたいのですが、現在のコードだと親の値のみ保持されて、子以下の値は保持されません。子以下の値まで含めて保持させるためには下のjavascriptの記述をどのように書き換えれば良いのでしょうか。

（フレームワークを使用しているので下記ソースは検索結果取得ページでも呼び出されます）

<select id="SEL1" name="SEL1"> 
<option value="">---</option> 
<?php 
foreach ($parent_list as $parent => $children_list) { 
echo '<option value="'.$parent.'"'; 
    if ($parent == $_GET['SEL1']){ 
     echo 'selected'; 
    } 
echo '>'.$parent.'</option>'; 
} 
?> 
</select> 
<!-- 子選択肢 --> 
<select id="SEL2" name="SEL2"> 
<option value="">---</option> 
<?php 
foreach ($parent_list as $parent => $children_list) { 
echo '<optgroup label="'.$parent.'">'; 
foreach ($children_list as $children => $grandson_list) { 
    $view_children = str_replace($parent,"",$children); 
    echo '<option value="'.$children.'"'; 
        if ($children == $_GET['SEL2']){ 
         echo 'selected'; 
        } 
    echo '>'.$view_children.'</option>'; 
} 
echo '</optgroup>'; 
} 
?> 
</select>

<script type = "text/javascript"> 
<!-- 
function ConnectedSelect(selIdList){ 
    for(var i=0;selIdList[i];i++) { 
        var CS = new Object(); 
        var obj = document.getElementById(selIdList[i]); 
        if(i){ 
            CS.node=document.createElement('select'); 
            var GR = obj.getElementsByTagName('optgroup'); 
            while(GR[0]) { 
                CS.node.appendChild(GR[0].cloneNode(true)); 
                obj.removeChild(GR[0]); 
            } 
            obj.disabled = true; 
        } 
        if(selIdList[i+1]) { 
            CS.nextSelect = document.getElementById(selIdList[i+1]); 
            obj.onchange = function(){ConnectedSelectEnabledSelect(this)}; 
        } else { 
            CS.nextSelect = false; 
        } 
        obj.ConnectedSelect = CS; 
    } 
}

function ConnectedSelectEnabledSelect(oSel){ 
    var oVal = oSel.options[oSel.selectedIndex].value; 
    if(oVal) { 
        while(oSel.ConnectedSelect.nextSelect.options[1])oSel.ConnectedSelect.nextSelect.remove(1); 
        var eF = false; 
        for(var OG=oSel.ConnectedSelect.nextSelect.ConnectedSelect.node.firstChild;OG;OG=OG.nextSibling) { 
            if(OG.label == oVal) { 
                eF = true; 
                for(var OP=OG.firstChild;OP;OP=OP.nextSibling) 
                    oSel.ConnectedSelect.nextSelect.appendChild(OP.cloneNode(true)); 
                break; 
            } 
        } 
        oSel.ConnectedSelect.nextSelect.disabled = !eF; 
    } else { 
        oSel.ConnectedSelect.nextSelect.selectedIndex = 0; 
        oSel.ConnectedSelect.nextSelect.disabled = true; 
    } 
    if(oSel.ConnectedSelect.nextSelect.onchange)oSel.ConnectedSelect.nextSelect.onchange();
}

ConnectedSelect(['SEL1','SEL2']);

//--> 
</script>
コード

Answer 1

親ページの情報を、

$_GET['SEL1']

として、SEL1で、送りだして受けているようなので、
同じ仕組みで、子ページの場合には、

$_GET['SEL1']
$_GET['SEL2']

と、２つの情報を送り出し、それを受けて
あとは、以下の既存コードと同じような感じで、

<?php 
foreach ($parent_list as $parent => $children_list) { 
echo '<option value="'.$parent.'"'; 
    if ($parent == $_GET['SEL1']){ 
     echo 'selected'; 
    } 
echo '>'.$parent.'</option>'; 
} 
?> 

SEL2をのoptionタグを出力するコードを追加したらいかがでしょう？？？