<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年を表示させたいのですが、方法を教えてください。
ひと昔前だと、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>
javascript がなんとなく読めるという前提で説明します。
開始の select name="begin" に、onchange のイベントを仕掛けます。
select で値を変えたときに、イベントハンドラが起動されます。
イベントハンドラでは、開始の select の option を順番に見て行って、選択されたものを見つけたら、見つけたフラグを立てます(変数 selected = true)。
見つけたフラグが立っていたら、開始の方の option と同じ内容を文字列で作っていきます。
全ての開始の方の option を見おわったら、文字列で作られた option の内容を終了の方の select にセットします。
見つけたフラグを立てる処理よりも、option の文字列を作る処理を前に書いているので、例えば、2010 が選択されていたとしたら、option の文字列に追加されるのは、その次の 2011 からになります。
これは、name="begin" の select タグに当たるオブジェクトを取得します。
回答のコードにコメントを入れてみました。
ちょっと今っぽい(というほどじゃないですが)書き方を、ちょっと昔っぽいコードにするとこんな感じです。
# こっちは、動作確認してないので、そのまま使うとエラーを出すかもしれません。
2017/03/01 16:14:11javascriptという方法があることを、持っている本で、知りました。また、懇切丁寧な、解説、ありがとうございます。勉強します。本当に、、いつもいつも、ありがとうございます。
2017/03/02 09:07:13