プルダウン項目の選択方法について
- プルダウンで目的の項目を簡単に選択する方法について考えています。カテゴリーに属する項目が非常に多く、毎回探すのが困難です。
- プルダウン項目を1文字で検索して表示する方法や、画面一杯に表示させる方法など、プルダウン項目の数が多くても使いやすい実装方法を知りたいです。
- プルダウン項目の数が多いカテゴリーでの選択方法についてアイデアを募集しています。選択しやすいインターフェースや実例があれば教えてください。
- ベストアンサー
プルダウン 項目が多いので先頭文字とかで検索したい
<最終的にやりたいこと> ・プルダウンで目的の項目を出来るだけ簡単に選択したい <困っていること> ・一つのカテゴリーに属する項目がもの凄く多いため、プルダウン項目を選択するのに(探し出すのに)、毎回苦労しています <前提条件> ・根本的な問題は、1カテゴリーに属する項目が多いことにあるのですが、その前提で教えてください ・サイト自体はPHPで作成していて、プルダウン表示項目は、MySQLより取得しています <知りたいこと> ・何か良いアイデアはないでしょうか? ・例えば、プルダウン項目の先頭1文字とかを検索して、該当する項目をプルダウンとして表示させるようなことは出来ないでしょうか? ・あるいは、プルダウン項目を、縦一列ではなくて、画面一杯に表示させるとか、そんなことは出来ないでしょうか? ・項目数が多くても、選択しやすいプルダウン実装方法をご存知の方や、そんな実例を見たことがある方は、是非教えてください、
- re999
- お礼率61% (476/777)
- JavaScript
- 回答数4
- ありがとう数2
- みんなの回答 (4)
- 専門家の回答
質問者が選んだベストアンサー
jQuery Searchable DropDown Plugin あたりを使えばいかがでしょうか? http://jsearchdropdown.sourceforge.net/ そもそも、昔のWindowsフォームには、こういう「複合型コンボボックス」があって、大量の項目を選択できていました。 Webになって、こういう部分はユーザビリティが悪くなったのですが、Ajaxの登場で救われることが多いです。 プラグイン側でTextboxのchangeイベントを拾って、$(this).val()を送ってくるので、それを受けてjsonで返すサーバサイドメソッドが必要です。 Ajaxがらみで「選択+Dropdown」プラグインは他にもいろいろあります。 動作原理はよく似ています。<select>を直接オーバーライドするものが多いので、実装も楽かと。 http://www.jquery4u.com/plugins/10-jquery-selectboxdrop-down-plugins/
その他の回答 (3)
- q-ue
- ベストアンサー率75% (12/16)
select要素を並べる場合は、例えば、 <div id="pull_down"> <span id="selected_item">選択してください</span> <div id="items"> <select><option>a</option><option>b</option></select> <select><option>c</option><option>d</option></select> </div> </div> として、 ・<div id="items">を最初非表示にしておく。 ・<span id="selected_item">がクリックした時に<div id="items">を表示する。 ・<option>が選択された時に、既に選択されたものがあれば、選択解除しておく。必要に応じてname属性の解除、付加も行う。 ・<span id="selected_item">のテキストを書き換える。 ・<div id="items">を非表示にする。 といった感じでしょうか。 select要素を使わない場合は、上記のselect要素を作成した要素に置き換えます。サーバーに値を送る場合は、input要素を別に用意しておきます。 検索する場合ですが、全データの受信に時間がかからない範囲なら、データ取得後、JavaScriptで検索するのがいいと思います。
お礼
回答ありがとうございました。 質問した時点では、何から手をつけたらよいか、さっぱりだったのですが、 アドバイスのおかげで、大まかながらも幾つかの方針を立てることができました。 これから実際に、色々試していきたいと思いますー
- fujillin
- ベストアンサー率61% (1594/2576)
違う方法になりますが、プルダウンではなく、例えばここのカテゴリーの選択のようにリンクなどで画面全体を利用して項目を表示して選択するのではいかがでしょうか。 それでも表示できないくらいの項目数であるなら、まず50音で最初の一文字を選択すると、次に、その文字から始まる項目だけの一覧を表示するとか… いっそのこと50音分のプルダウンを並べてしまうという方法もあるかも知れません。 通常のフォームでも良いですし、リンクでも、あるいはJavascriptを用いたajaxでも良さそうですが。 当然ながら、これに対応したサーバ側のphpなどによるプログラムが必要になりますが、現状でもほぼ同様のものを用意なさっていると思いますので、大きくは変わらないと思います。
補足
回答ありがとうございました。 >プルダウンではなく、例えばここのカテゴリーの選択のようにリンクなどで画面全体を利用して項目を表示して選択するのではいかがでしょうか そうですね。この方法は思いつかなかったのですが、 プルダウン項目を見やすくするのと、効果としてはある意味同じなのかもしれません。 だけど、既にフォームで実装しているので、 出来たらそのまま使えるプルダウンで、何か良い方法がないか探してみたいと思います。 どうしてもうまくいかなかった場合には、この方法を検討してみたいと思います >まず50音で最初の一文字を選択すると、次に、その文字から始まる項目だけの一覧を表示するとか… 別件で、似た遷移を利用したことがあるのですが、意外に使いづらかったので、 この方法は個人的に避けたいです >いっそのこと50音分のプルダウンを並べてしまうという方法もあるかも知れません そこまで数は多くないのですが、でも、現状の縦1列よりは見やすいかもしれないと思いました >現状でもほぼ同様のものを用意なさっていると思いますので、大きくは変わらないと思います アドバイスありがとうございます。確かに、選択するのに苦労すると言っても、実際には何十分もかかっているわけではないのですが、でも、可能なら少しでもイライラを解消したいと考えています
- q-ue
- ベストアンサー率75% (12/16)
もの凄く多いというのは、具体的にはどのくらいなのでしょうか。 現在は、select要素でプルダウンを表示しているのですか? それならば、単にselect要素の数を増やして横に並べれば、画面一杯に表示できます。(縦のサイズはsize 属性で指定可) その場合は、選択された時にJavaScriptで処理をする必要があります。 また、select要素を使わずに、自分でプルダウンメニューを実装するのも手です。 検索で該当する項目を表示させるのも、そこまで大変ではないと思います。
補足
回答ありがとうございます。 >もの凄く多いというのは、具体的にはどのくらいなのでしょうか。 100件近くあり、今後も増える予定です。いずれはグルーピングすると思うのですが、時期はまだ未定のため、とりあえず何か見やすくする方法はないかと思い、質問しました >現在は、select要素でプルダウンを表示しているのですか? はい。縦1列で >それならば、単にselect要素の数を増やして横に並べれば、画面一杯に表示できます。(縦のサイズはsize 属性で指定可) >その場合は、選択された時にJavaScriptで処理をする必要があります その方法を是非教えてください! >また、select要素を使わずに、自分でプルダウンメニューを実装するのも手です どうやって実装するのでしょうか? コードを一から書いていくということでしょうか? 参考になるサイトや、検索キーワード等あれば、教えてくださいー >検索で該当する項目を表示させるのも、そこまで大変ではないと思います ・イメージ的には、最初にMySQLへアクセスして、全データを取得した後、JavaScriptで何かをやる感じでしょうか? ・それとも、最初にAjax通信か何かで、最初の1文字で検索して、その後、再度、DBアクセスしてプルダウン項目を取得する感じなのでしょうか? ・あるいは、それ以外?
関連するQ&A
- javascriptのプルダウンで項目外の表示可否
javascriptのプルダウンで一覧から項目を選択したら、プルダウンに表示する文字を一覧とは違うものに出来るかどうか。 説明文が分かりにくかったら申し訳ございません。 図と文字で説明すると以下のような感じです。 ============================ 前提:リストに表示させる項目は「ああああ」「いいいい」「うううう」 1.まず、プルダウンを開きます。 [ ▽] ――――― |ああああ| |いいいい|←「いいいい」を選択する |ううううう | ――――― 2.項目を選択する。 [2番目▽]←「いいいい」を選択したが、「2番目」とプルダウンに表示させる。 3.またプルダウンリストを開く [2番目▽] ――――― |ああああ| |いいいい| |ううううう | ――――― 「2番目」と表示されたまま最初にあった全ての項目が表示される。 プルダウンは複数行あるグリッド(javascriptでもこの部品名か分かりませんが、エクセルみたいに動作する部品です)でA列に同じ種類が置かれます。 ↓こんな感じで A列 | B列 | C列 |←ヘッダ部 ―――――――――――― [ ▽]| | | ←ボディ ―――――――――――― [ ▽]| | | ―――――――――――― [ ▽]| | | ―――――――――――― ============================ 上記のような動作はjavascriptでは可能でしょうか? javascriptは門外漢で、プログラマーにjavascriptでは出来ない!と言われてしまっているのですが、VB的には出来るのだからjavascriptでも出来るのではないかと思っています。 ただ、動作させる場所がweb上なので自分が思っているものとは制限が違うのではないかもと思い、意見を言えない状態です。 ご存知のいらっしゃいましたら ・可能か否か 出来れば ・どのような作り方であれば実現できそうか (プルダウンを開いた時と閉じた時で処理を走らせればいいとか簡単でいいので) などを教えていただければ幸いです。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- PHPの検索表示について
PHP+Mysqlでプルダウンの項目を選択しただけで、別ウィンドウを開かずカラム内にDBから呼び出したデータを表示させることは可能でしょうか? プルダウンの項目をDBから呼び出して、項目選択後にボタンを押して表示することは出来たのですが、項目を選んだだけでできるのであれば、どうぞご指導ください。よろしくお願い致します。
- 締切済み
- PHP
- プルダウンリストとテキストエリアの連動
どう調べてもわからないので教えてください。 HTML上で動作するツールを作成しています。 最終的に、あるテンプレートをテキストエリアに表示させたいと考えています。 そのために、項目をいくつかプルダウンで選択し進んでいくというものです。 プルダウンリストは、選択したリストにより連動し、選択肢が変わるように したいのです。 項目別にプルダウンは5つ、5つ目はない場合もあります。 【手順】 (1)プルダウン(1)選択 ↓ (2)プルダウン(2)選択 ↓ (3)プルダウン(3)選択 ↓ (4)プルダウン(4)選択 ↓ (5)プルダウン(5)選択 ←選択肢がない場合あり ↓ テキストエリアに該当の文言が表示 ちょっと複雑なのですが、よろしくお願いいたします。
- 締切済み
- HTML
- プルダウン検索で特定の文字が文字化けします。
プログラムに関してはまったくの初心者です。 このカテゴリでいいのか分かりませんが、質問させていただきます。 現在CGIを使ってプルダウン選択で検索できるWEBページを 編集していたところ、ある文字のみ、文字化けして うまく検索ができませんでした。 プルダウンで選ぶ段階までは普通に表示されているのですが、 いざ検索してみると下記のような表示になり検索に引っかかりません。 「柾氓@〆」 や 「」「明。」 など。 CGIに問題があるのかどうか分かりませんが、原因が分かる方が いらっしゃいましたら教えていただけますでしょうか。 また情報が足りないようでしたらご指示をいただけますと助かります。 どうぞよろしくお願い致します。
- 締切済み
- CGI
- プルダウンで・・・。
プルダウンの選択項目に上付きの"-"を表示する方法を教えてください。 あと、そういった文字の表示方法一覧とか載ってるHPあれば教えて下さい。 よろしくお願いします。
- 締切済み
- HTML
- プルダウン表示がうまくいかない
ネット通販や、アンケートの記入などをする時に、プルダウンの選択事項が多いページでは、プルダウンの表示がおかしくなります。 プルダウン自体が表示されなかったり、プルダウンの位置がずれたり、プルダウンすると選択項目がとんでもない所に表示されたり…と、症状は色々です。共通しているのは、プルダウンでは選択不可能な事です。 選択事項が1つ2つのページでは大丈夫なのですが、 たくさんあったり、プルダウン同士の間が詰まっていたりする時に、かなりの確立でこの現象が起こります。そのページを更新しても改善されません。 どうしたらきれいに見る事が出きるのでしょうか? 環境は Win98 IE6、この症状はずっと以前からです。
- ベストアンサー
- その他(インターネット・Webサービス)
- 検索窓とプルダウンメニュー機能の作り方で困っています。どなたか教えてい
検索窓とプルダウンメニュー機能の作り方で困っています。どなたか教えていただけますか? 【やりたいこと】 ■検索窓とその横にプルダウンメニュー(4つのカテゴリ名から選択可能)、そして検索ボタンがあります。 1.検索窓に任意のキーワード(仮:「あいうえお」)を入力 ※1 2.次にプルダウンメニューの中からカテゴリを1つ選択(仮:「ABCD」)※2 3.検索ボタンを押すと、検索窓内に表示されるキーワード(※1)の後ろに、 スペース + ※2が表示されるようにしたい。(結果ページの検索窓) 【例】 1.検索窓に「あいうえお」 2.プルダウンメニューより「ABCD」を選択 3.検索ボタンを押す⇒(結果ページの)検索窓内に「あいうえお ABCD」と表示させたい。 どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- プルダウンとテキストの連動
お世話になります。プルダウン1を選択すると、プルダウン2の内容が切り替わり、さらにプルダウン2を選択すると、横のテキストフィールド内にテキストが入る(プルダウン2で選択した項目の説明)というようにしたいのです。プルダウン1をえらぶと2の項目がかわる、まではできたのですが、次のテキスト変更がわかりません。プルダウン3として、そこにテキストを表示させようかと思ったのですが、やはりテキストフィールドにしてほしいといわれてしまいました。。。わかりにくい説明ですみませんが、参考になるサイトなどご存じでしたら教えてください。どうかよろしくお願い致します。
- ベストアンサー
- JavaScript
- エクセル:セルにプルダウンメニューをつけたい
エクセルにおいて、セル一つにプルダウンメニューをつけたいのです。 ここのトップページのカテゴリ選択のように、一定の項目をあらかじめ用意しておき、 その中から選択をさせたいのです。 新規項目の追加は必要ありません。 あと、どれが選択されているかを知る方法もあわせて教えてください。 よろしくお願いします。
- ベストアンサー
- オフィス系ソフト
お礼
回答ありがとうございました。 >Ajaxがらみで「選択+Dropdown」プラグインは他にもいろいろあります リンク先、大変参考になりましたッ! 自分でも結構探したつもりなのですが、日本語で検索したためか、なかなか思うようなページにたどり着けませんでした。 改めて、海外サイトも探すべきだ、と思いましたー