人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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年を表示させたいのですが、方法を教えてください。

●質問者: kojiro_i619
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●100ポイント ベストアンサー

ひと昔前だと、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>

kojiro_i619さんのコメント
いつも、ありがとうございます。完璧に、動きました。まじですか。えーと、このコードの意味が判らない。 1.なぜ、このコードで、最後のリストになる2014のデータが、どうして、入ったのか 2.このコードの中で var begin = document.querySelector('select[name="begin"]; がありますが、これで、ドロップダウンリストで選んだ値が取れるわけでしょうか?

a-kuma3さんのコメント
javascript がなんとなく読めるという前提で説明します。 開始の select name="begin" に、onchange のイベントを仕掛けます。 select で値を変えたときに、イベントハンドラが起動されます。 イベントハンドラでは、開始の select の option を順番に見て行って、選択されたものを見つけたら、見つけたフラグを立てます(変数 selected = true)。 見つけたフラグが立っていたら、開始の方の option と同じ内容を文字列で作っていきます。 全ての開始の方の option を見おわったら、文字列で作られた option の内容を終了の方の select にセットします。 見つけたフラグを立てる処理よりも、option の文字列を作る処理を前に書いているので、例えば、2010 が選択されていたとしたら、option の文字列に追加されるのは、その次の 2011 からになります。 >|javascript| var begin = document.querySelector('select[name="begin"]'); ||< これは、name="begin" の select タグに当たるオブジェクトを取得します。 回答のコードにコメントを入れてみました。 >|javascript| // ページを読み終わったときに、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; }); }); ||< ちょっと今っぽい(というほどじゃないですが)書き方を、ちょっと昔っぽいコードにするとこんな感じです。 >|javascript| 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; ||< # こっちは、動作確認してないので、そのまま使うとエラーを出すかもしれません。

kojiro_i619さんのコメント
javascriptという方法があることを、持っている本で、知りました。また、懇切丁寧な、解説、ありがとうございます。勉強します。本当に、、いつもいつも、ありがとうございます。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ