Java Jspを使っています。ドロップダウンリストを

<select name="begin" size="1">
<%
for(int j=1;j<nens.length;j++){
%>
<option value="<%="nen"+j %>"><%=nens[j] %></option>
<%
}
%>
</select><br>
で2007から2014年まで表示させています。これで2008を選んだら、後のドロップダウンリストで、2009-2014年を表示させたいのですが、方法を教えてください。

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2017/02/28 15:45:11
  • 終了:2017/03/02 09:07:27

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4545ベストアンサー獲得回数18952017/02/28 20:22:38

ポイント100pt

ひと昔前だと、jsp で処理しようとするのが多かったような気もしますが、今どきなら javascript でやっちゃって良いんじゃないかと思います。
やり方はいろいろあると思いますが、例えばこんな感じ。

<select name="begin" size="1">
<%
    for(int j=1;j<nens.length;j++){
%>
    <option value="<%="nen"+j %>"><%=nens[j] %></option>
<%
    }
%>
</select><br>
<!-- ここまで、質問文 -->

<!-- ここから、回答 -->
<select name="finish" size="1"></select> 

<script>
window.addEventListener("DOMContentLoaded", function() {
    var begin = document.querySelector('select[name="begin"]');
    var finish = document.querySelector('select[name="finish"]');
    begin.addEventListener("change", function() {
        var s = "";
        var selected = false;
        Array.prototype.forEach.call(begin.options, function(opt) {
            if (selected) {
                s += '<option value="' + opt.value + '">' + opt.innerHTML + '</option>';
            }
            if (opt.selected) {
                selected = true;
            }
        })
        finish.innerHTML = s;
    });
});
</script>
他1件のコメントを見る
id:a-kuma3

javascript がなんとなく読めるという前提で説明します。

開始の select name="begin" に、onchange のイベントを仕掛けます。
select で値を変えたときに、イベントハンドラが起動されます。
イベントハンドラでは、開始の select の option を順番に見て行って、選択されたものを見つけたら、見つけたフラグを立てます(変数 selected = true)。
見つけたフラグが立っていたら、開始の方の option と同じ内容を文字列で作っていきます。
全ての開始の方の option を見おわったら、文字列で作られた option の内容を終了の方の select にセットします。

見つけたフラグを立てる処理よりも、option の文字列を作る処理を前に書いているので、例えば、2010 が選択されていたとしたら、option の文字列に追加されるのは、その次の 2011 からになります。

var begin = document.querySelector('select[name="begin"]');

これは、name="begin" の select タグに当たるオブジェクトを取得します。

回答のコードにコメントを入れてみました。

// ページを読み終わったときに、function() { ~ } を実行
window.addEventListener("DOMContentLoaded", function() {
    // 開始の select タグのオブジェクト
    var begin = document.querySelector('select[name="begin"]');
    // 終了の select タグのオブジェクト
    var finish = document.querySelector('select[name="finish"]');

    // 開始の select で選択肢を選んだときに、function() { ~ } を実行
    begin.addEventListener("change", function() {
        // 終了の select の内容になる文字列(初期値は空っぽ)
        var s = "";

        // 開始で選択されたものを見つけたかどうか(true で見つけた、の意味)
        var selected = false;

        // 開始の select タグの子供の option タグを順番に見て、function(opt) { ~ } を実行
        // 引数の opt が見ている option タグ
        Array.prototype.forEach.call(begin.options, function(opt) {
            // もし、選択したものを見つけた後だったら、value と表示内容が同じ option タグを
            // 表す HTML の文字列を作ってゆく
            if (selected) {
                s += '<option value="' + opt.value + '">' + opt.innerHTML + '</option>';
            }

            // 開始の select の中で、選択されているものだったら、selected を true にする
            if (opt.selected) {
                selected = true;
            }
        })

        // 開始のループの中で作った、終了用の option タグをセット
        // これで、見た目が出来上がる
        finish.innerHTML = s;
    });
});

ちょっと今っぽい(というほどじゃないですが)書き方を、ちょっと昔っぽいコードにするとこんな感じです。

function get_select_element(name) {
    var select_list = document.getElementsByTagName("select");
    for (var i = 0 ; i < select_list.length ; ++i) {
        if (select_list[i].name == name) {
            return select_list[i];
        }
    }
    return null;
}

function create_finish_option() {
    var begin = get_select_element("begin");
    var finish = get_select_element("finish");

    var s = "";
    var selected = false;
    for (var i = 0 ; i < begin.options.length ; ++i) {
        var opt = begin.options[i];
        if (selected) {
            s += '<option value="' + opt.value + '">' + opt.innerHTML + '</option>';
        }
        if (opt.selected) {
            selected = true;
        }
    })

    finish.innerHTML = s;
}

function register_event_handler() {
    var begin = get_select_element("begin");
    begin.onchange = create_finish_option;
}

window.onload = register_event_handler;

# こっちは、動作確認してないので、そのまま使うとエラーを出すかもしれません。

2017/03/01 16:14:11
id:kojiro_i619

javascriptという方法があることを、持っている本で、知りました。また、懇切丁寧な、解説、ありがとうございます。勉強します。本当に、、いつもいつも、ありがとうございます。

2017/03/02 09:07:13

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません