- PR -

【Javascript】プルダウンメニュー

1
投稿者投稿内容
もじゃもじゃ
会議室デビュー日: 2007/06/14
投稿数: 8
投稿日時: 2008-08-19 00:53
お世話になります。
大変シンプルなことですが質問させてください。

画面に２つのプルダウンメニュー(multiple（複数選択可）)AとBがあります。
※AとBには各100件程度のメニュー(text-value)がそれぞれ入っているとします。

現在Aのメニューを選択し、ダブルクリックするとＢのメニューの先頭に追加されるような仕組みを、単純にAの選択されたリストとBの全件をfor文で回し、Bを再形成する形で作っています。

これで問題なかったのですが、プルダウンのメニューが1万件程度になると
当たり前ですがfor文で回しているため処理にかなり時間がかかります。

そこで質問ですが、このような場合どのように実装するのが一般的なのでしょうか？
できれば、ループさせずに、プルダウンの先頭に差し込んだりできればよいのですが、どうしても方法に行き詰りまして。

ご意見いただければと思います。

【動作環境】
windows　IE、firefoxの最新
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-08-19 01:27
〜については他の方にお任せします。

スレ主さん、叩かれてもめげないでね。

==
とりあえず、矛盾点だけ。
マルチ選択ならば、”プルダウン”にはなりませんが。
リストBOXじゃないのですか？

＞大変シンプルなこと
想像できないのでサーバーコードが入ってないミニマムコード
提示してもらえませんか？HTMLなりで保存して実行できる形が
望ましいです。

＃いつも思うのですが、SQLは単体テストしてから実装するでしょ？
＃サーバーサイドの言語は何か分かりませんが、JavaScriptも単体で
＃作ってから移植しようとか考えないのでしょうか？？


＞どのように実装するのが一般的なのでしょうか？
１００×１００に分けるとか。
１００００行もあるリストなんて誰も見ませんって。
しかもマルチ選択なら、前の方で選択した項目なんて忘れちゃいます。
kiyokura
ベテラン
会議室デビュー日: 2007/08/08
投稿数: 69
お住まい・勤務地: 岡山
投稿日時: 2008-08-19 02:04
select要素の先頭になるべく省力でoptionを追加するなら、一般的かどうかは解りませんが、DOMのinsertBeforeで突っ込むやり方があります。

手順的には、

1) document.createElement() で追加したいoption要素を作る（opt1）
2) document.getElementById()等で追加先のselect要素を取得して
3) 取得したselect要素からchildNodesとかで一つ目のoptionを取得して(opt0)
4) 取得したselect要素のinsertBeforeメソッドでopt0の前にopt1を挿入

という感じになります。
とりあえずは、Javascript、DOM、insertBefore等のキーワードで調べてみてください。
＃1万件のoptionのあるselectで試してみましたが、追加動作自体は実用的な速度かな、と思いました。


※余談
ぴあちゃんさんもおっしゃっておられるとおり、10000件だと表示の時点で既に結構な重さになるように思いますし、数百件レベルの時点でそこから探して選択させるのが何処まで適切か、やはり設計に疑問を感じてしまいます。
＃実運用時は10000件になる事は無いとか、どこかでリミットを設ける等であれば良いかもしれませんが。

※余談２
ここはJava Solutionの掲示板です。
ひょっとしてサーバ側の実装がJavaなのでこちらに書かれたのかもしれませんが、内容に的にJavaとは関係無いJavascriptの話題の用ですので、@ITであれば『リッチクライアント & 帳票』の掲示板のほうが適切に思います。
もじゃもじゃ
会議室デビュー日: 2007/06/14
投稿数: 8
投稿日時: 2008-08-19 17:03
お二人とも回答ありがとうございました。

まず、仕様面についてはお二人がおっしゃることがごもっともだと思います。
正論過ぎて否定の言葉も見つかりません。
ただ、今件に関しては不本意ながら自分の手の届く範囲ではどうすることも出来ない事情がありまして、どうか目をつぶっていただければと思います。

業務レベルではなく、あくまで実現可、不可の範疇でお話させていただければと思います。

次に掲示板についてですが、別の方がJavascriptの質問を記載されていたので、気になりながらも記載してしまいました。
以後気をつけます。ご指摘ありがとうございます。

最後にinsertBeforeを使ってkiyokura様の手順どおりに実装し、うまく出来上がりました。お二人とも拙い質問にご回答ありがとうございました。
1

スキルアップ／キャリアアップ（JOB@IT）