C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[2]: 二つのセレクトボックスの連動処理


(過去ログ 84 を表示中)

[トピック内 3 記事 (1 - 3 表示)]  << 0 >>

■49924 / inTopicNo.1)  二つのセレクトボックスの連動処理
  
□投稿者/ 森塚 (1回)-(2010/05/23(Sun) 08:44:03)

分類:[Java] 

お世話になります。
現在strutsでの動作で質問したい箇所があります。

行いたいことはActionでDBから取得したDTOの値をjspに渡しセレクトボックスとして表示させたいです。一つのDTO単独の処理なら下記で表示できました。

<html:select name="formName" property="result">
<html:options collection = "dtoNm" property="cd" labelProperty="nm"/>
</html:select>

しかし、今度行いたいのは二つのDTOを用意して二つのセレクトボックスを作成したいのですが一つ目のDTO1に定義されているcd1が2桁で設定されていて、二つ目のDTO2に定義されているcd2が5桁で定義されています。
 このときcd1の2桁がcd2の上2桁に紐付いていてDTO1のセレクトボックスを選んだらDTO2のセレクトボックスがcd1に紐付いたcd2のデータだけ選択できるようにしたいです。
(例:DTO1のセレクトボックスでcd1が10のものが選択されたらDTO2のセレクトボックスはcd2が10001,10002,10100など10始まりのものしか選択できなくなるようにしたいです)
 ActionにてDTO2の中身をcd2の上2桁毎に振り分けたものは作成したのですがjsp側でどのように表示させていいのかわかりません。
 DTOもDBから取ってくるのでcdの値を10,20固定などではなく可変で行いたいです。

きっとjavascriptも書き込まなきゃいけないと思うのですが。。。

初めての質問なので状況の説明など至らないところがあるかもしれませんがよろしくお願いします。
引用返信 編集キー/
■49926 / inTopicNo.2)  Re[1]: 二つのセレクトボックスの連動処理
□投稿者/ たか (46回)-(2010/05/23(Sun) 10:54:07)
やり方としては3通りあります。

1つは 1つ目のセレクトボックスの値が変更された際にonChangeイベントで一度データをポストし
画面をリロードして そのポストされたデータを元に2つめのセレクトボックスの値をサーバー内で生成しセットすることです。
構築難易度は一番易しいが UI的には若干使いにくい
<html:select name="formName" property="result" onChange="this.form.action='Self.do';this.form.submit()">
(strutsは1年以上ぐらい書いてないから微妙に違うかも?)
Self.doにはそのページのURLってことで・・・
あとリロードしたってフラグ値を渡してやる必要もあるかも?


2つめはあらかじめ2つめのセレクトぼっくの候補になり得る値を取得しておいてJavaScript内にセットし
JavaScriptによって1つめのセレクトぼっくのonChangeイベントで2つめのセレクトボックスにセットすることです。
■参考
http://lumber-mill.co.jp/gallery/view/portfolio/yosei/js/combobox
構築難易度はまぁまぁで UI的には使いやすい ただし2番目にセットされる候補が多いとサーバー負荷が大きい


3つめはAjaxで動的にサーバーから候補を取得してJavaScriptでセットする
構築難易度は一番難しい(というよりメンドクサイ)けどUI的には使いやすいしサーバー負荷は少なくて済む


どれを選択するかはケースバイケース。
大手サイトだと3番目が増えてきてるけど未だに1のところもたくさんあるしなんとも言えない。

引用返信 編集キー/
■49987 / inTopicNo.3)  Re[2]: 二つのセレクトボックスの連動処理
□投稿者/ 森塚 (2回)-(2010/05/26(Wed) 00:44:49)
No49926 (たか さん) に返信
> やり方としては3通りあります。
>
> 1つは 1つ目のセレクトボックスの値が変更された際にonChangeイベントで一度データをポストし
> 画面をリロードして そのポストされたデータを元に2つめのセレクトボックスの値をサーバー内で生成しセットすることです。
> 構築難易度は一番易しいが UI的には若干使いにくい
> <html:select name="formName" property="result" onChange="this.form.action='Self.do';this.form.submit()">
> (strutsは1年以上ぐらい書いてないから微妙に違うかも?)
> Self.doにはそのページのURLってことで・・・
> あとリロードしたってフラグ値を渡してやる必要もあるかも?
>
>
> 2つめはあらかじめ2つめのセレクトぼっくの候補になり得る値を取得しておいてJavaScript内にセットし
> JavaScriptによって1つめのセレクトぼっくのonChangeイベントで2つめのセレクトボックスにセットすることです。
> ■参考
> http://lumber-mill.co.jp/gallery/view/portfolio/yosei/js/combobox
> 構築難易度はまぁまぁで UI的には使いやすい ただし2番目にセットされる候補が多いとサーバー負荷が大きい
>
>
> 3つめはAjaxで動的にサーバーから候補を取得してJavaScriptでセットする
> 構築難易度は一番難しい(というよりメンドクサイ)けどUI的には使いやすいしサーバー負荷は少なくて済む
>
>
> どれを選択するかはケースバイケース。
> 大手サイトだと3番目が増えてきてるけど未だに1のところもたくさんあるしなんとも言えない。
>

ご解答ありがとうございます。

対応ですがデータ量もそこまで多くないためあらかじめJSPで連動するセレクトボックスを作成しておき、disabledにしておいて一つ目の親のセレクトボックスを選択したらそれに合わせて連動するセレクトボックスを活性化させるという動きにしました。

勉強になりましたありがとうございます。
解決済み
引用返信 編集キー/


トピック内ページ移動 / << 0 >>

このトピックに書きこむ

過去ログには書き込み不可

管理者用

- Child Tree -