質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.54%

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

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,370

winkle

score 6

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>
コード
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

親ページの情報を、

$_GET['SEL1']


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

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


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

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


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.54%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる