JavaScript HTMLプルダウンの初期値を固定したい

Question

やりたいこと
ページ読み込み時
javascriptで作成した
プルダウンの値を選択されている値で固定したい。

画面の操作として
年月日がプルダウンで表示されており
そのプルダウンを選択し検索を押下すると
getでその年月日のデータを表示するというページです。

問題点として
2017/09プルダウンを選択して検索を押すと
画面は切り替わるのですがプルダウンがデフォルトの現在の（質問日2017/08/31）
2017/08を選んだ状態になってしまします。

プルダウンをphpで作成していたときはうまく動作していたのですが
今回javascrip にてプルダウンのオプションを作成しているので
その場合のプルダウンの固定はどうすればよろしいのでしょうか？

$search_cond['created_at']に
選択した日付データが入っています。

    <?php echo Form::open(array("action" => "","method"=>"get", "id" => "form1"))?>
    <select name="created_at" id="form_created_at"></select>
    <?php echo Form::submit("form_submit","検索",array("onclick" => "do_search($club_member->id)")) ?>
    <?php echo var_dump($search_cond['created_at']) ?>
    <?php echo Form::close()?>

html化したコード
<form action="" method="get" id="form1" accept-charset="utf-8">    
<select name="created_at" id="form_created_at"></select>    
<input onclick="do_search(6)" name="form_submit" value="検索" type="submit" id="form_form_submit" />

    function do_search(id)
    {
        $("#form1").attr("action","/hogehoge/"+id)
    }

var optionYMCreate, this_day, this_month, this_year, today,this_ym;
    today = new Date();
    this_year = today.getFullYear();
    this_month = today.getMonth() + 1;
    this_ym = this_year +'/'+this_month; //今月

    //年月ｵﾌﾟｼｮﾝを作る
    optionYMCreate = function(ystart,yend, id) { //年の範囲と対象のコントロールIDを受け取る
        var i, opt,m_i,ym,selected_option ;
        opt = null;
        for (i = ystart; i <= yend ; i++) { //年のループ
            for(m_i=1;m_i<=12;m_i++){ //月のループ
                ym = i +'/'+ m_i; //ループ内の年月
                selected_option = '';
                if (ym === this_ym) { //今年月と一致してたら選択済みとする
                    selected_option = 'selected';
                }
                opt += '<option value="' + ym + '" '+selected_option+'>' + ym + '</option>';
            }
        }
        return document.getElementById(id).innerHTML = opt;
    };

    optionYMCreate(2017, this_year, 'form_created_at');

Answer 1

PHPで検索処理を行うのであればselectのoption自体もPHPで作って、
ボタン押下時のsubmitを受け取り、selectのoptionを作っているところでselectedをつけたほうが良いですね。

javascriptで行いたいのであれば、getでsubmitされているようなので
QueryStringを受け取ってform_created_atのoption構築後にselectの初期値とすると良いです。

• javascriptでクエリ文字列を取得する
• セレクトボックスの値を取得・設定

Comments

[amaguri]

無事解決できました！
記事を読んだところ
http://www.pahoo.org/e-soul/webtech/php02/php02-30-01.shtm
に
ただし、いちいちサーバサイドで計算させることはサーバに負荷がかかるので、この処理は、本来はクライアントサイドで JavaScript で行わせるのが良いだろう。
とありましたので質問させていただきました！
いつもありがとうございます！

[m.ts10806]

記事自体もそこそこ古いというが気になりますが、
何千何万とループさせる計算ではないので、速度的な面、負荷的な面からしてもそこまでの負荷とは私は思いません。（PHPも7になって速度も上がりましたし、サーバーの性能も年々良くなっています）
結果的には同じではありますが、submitした情報を取得して検索処理を行うのはPHPであり、あまりあちこちに記述が分散してしまうとメンテナンス性も良くないので、「表示前に検索も含めてサーバー側で出来る限り用事を済ませておく」というやり方もありだとは思います。
javascript,htmlは改ざん可能ですしね。。

[amaguri]

なるほど
そうなると
いただいコードをjsにて実装し
<?php echo Form::select("id",value"",オプション) ?>というふうに実装するのもありということですね！

[m.ts10806]

JSで作ったY/MのセレクトボックスのコードをPHPで作るのでそもそもJSは不要です。
（何かのフレームワークなのであればたぶん機能のままだとY/M形式は難しいかもしれません）

[amaguri]

なるほど。
feulを利用しています。。