<最終的にやりたいこと>
・プルダウンで目的の項目を出来るだけ簡単に選択したい
<困っていること>
・一つのカテゴリーに属する項目がもの凄く多いため、プルダウン項目を選択するのに(探し出すのに)、毎回苦労しています
<前提条件>
・根本的な問題は、1カテゴリーに属する項目が多いことにあるのですが、その前提で教えてください
・サイト自体はPHPで作成していて、プルダウン表示項目は、MySQLより取得しています
<知りたいこと>
・何か良いアイデアはないでしょうか?
・例えば、プルダウン項目の先頭1文字とかを検索して、該当する項目をプルダウンとして表示させるようなことは出来ないでしょうか?
・あるいは、プルダウン項目を、縦一列ではなくて、画面一杯に表示させるとか、そんなことは出来ないでしょうか?
・項目数が多くても、選択しやすいプルダウン実装方法をご存知の方や、そんな実例を見たことがある方は、是非教えてください、
No.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-select …
回答ありがとうございました。
>Ajaxがらみで「選択+Dropdown」プラグインは他にもいろいろあります
リンク先、大変参考になりましたッ!
自分でも結構探したつもりなのですが、日本語で検索したためか、なかなか思うようなページにたどり着けませんでした。
改めて、海外サイトも探すべきだ、と思いましたー
No.3
- 回答日時:
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で検索するのがいいと思います。
回答ありがとうございました。
質問した時点では、何から手をつけたらよいか、さっぱりだったのですが、
アドバイスのおかげで、大まかながらも幾つかの方針を立てることができました。
これから実際に、色々試していきたいと思いますー
No.2
- 回答日時:
違う方法になりますが、プルダウンではなく、例えばここのカテゴリーの選択のようにリンクなどで画面全体を利用して項目を表示して選択するのではいかがでしょうか。
それでも表示できないくらいの項目数であるなら、まず50音で最初の一文字を選択すると、次に、その文字から始まる項目だけの一覧を表示するとか…
いっそのこと50音分のプルダウンを並べてしまうという方法もあるかも知れません。
通常のフォームでも良いですし、リンクでも、あるいはJavascriptを用いたajaxでも良さそうですが。
当然ながら、これに対応したサーバ側のphpなどによるプログラムが必要になりますが、現状でもほぼ同様のものを用意なさっていると思いますので、大きくは変わらないと思います。
この回答への補足
回答ありがとうございました。
>プルダウンではなく、例えばここのカテゴリーの選択のようにリンクなどで画面全体を利用して項目を表示して選択するのではいかがでしょうか
そうですね。この方法は思いつかなかったのですが、
プルダウン項目を見やすくするのと、効果としてはある意味同じなのかもしれません。
だけど、既にフォームで実装しているので、
出来たらそのまま使えるプルダウンで、何か良い方法がないか探してみたいと思います。
どうしてもうまくいかなかった場合には、この方法を検討してみたいと思います
>まず50音で最初の一文字を選択すると、次に、その文字から始まる項目だけの一覧を表示するとか…
別件で、似た遷移を利用したことがあるのですが、意外に使いづらかったので、
この方法は個人的に避けたいです
>いっそのこと50音分のプルダウンを並べてしまうという方法もあるかも知れません
そこまで数は多くないのですが、でも、現状の縦1列よりは見やすいかもしれないと思いました
>現状でもほぼ同様のものを用意なさっていると思いますので、大きくは変わらないと思います
アドバイスありがとうございます。確かに、選択するのに苦労すると言っても、実際には何十分もかかっているわけではないのですが、でも、可能なら少しでもイライラを解消したいと考えています
No.1
- 回答日時:
もの凄く多いというのは、具体的にはどのくらいなのでしょうか。
現在は、select要素でプルダウンを表示しているのですか?
それならば、単にselect要素の数を増やして横に並べれば、画面一杯に表示できます。(縦のサイズはsize 属性で指定可)
その場合は、選択された時にJavaScriptで処理をする必要があります。
また、select要素を使わずに、自分でプルダウンメニューを実装するのも手です。
検索で該当する項目を表示させるのも、そこまで大変ではないと思います。
この回答への補足
回答ありがとうございます。
>もの凄く多いというのは、具体的にはどのくらいなのでしょうか。
100件近くあり、今後も増える予定です。いずれはグルーピングすると思うのですが、時期はまだ未定のため、とりあえず何か見やすくする方法はないかと思い、質問しました
>現在は、select要素でプルダウンを表示しているのですか?
はい。縦1列で
>それならば、単にselect要素の数を増やして横に並べれば、画面一杯に表示できます。(縦のサイズはsize 属性で指定可)
>その場合は、選択された時にJavaScriptで処理をする必要があります
その方法を是非教えてください!
>また、select要素を使わずに、自分でプルダウンメニューを実装するのも手です
どうやって実装するのでしょうか? コードを一から書いていくということでしょうか? 参考になるサイトや、検索キーワード等あれば、教えてくださいー
>検索で該当する項目を表示させるのも、そこまで大変ではないと思います
・イメージ的には、最初にMySQLへアクセスして、全データを取得した後、JavaScriptで何かをやる感じでしょうか?
・それとも、最初にAjax通信か何かで、最初の1文字で検索して、その後、再度、DBアクセスしてプルダウン項目を取得する感じなのでしょうか?
・あるいは、それ以外?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) エクセルについて教えてください。 2 2023/06/14 11:11
- Excel(エクセル) VLOOKUP が機能しない、その原因は何 ? 8 2022/10/19 12:06
- プリンタ・スキャナー 印刷画面 1 2022/04/26 14:52
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- Excel(エクセル) Excelのプルダウンメニューの内容を人によって可変する方法 2 2023/03/28 14:52
- Access(アクセス) access フォーム 大分類、小分類 1 2022/08/11 18:03
- Excel(エクセル) エクセルの数式で教えてください。 1 2022/10/25 09:26
- その他(IT・Webサービス) google サイトの目次表示について 1 2023/06/17 23:24
- JavaScript jsで診断コンテンツのページ内切り替えについて 1 2023/04/14 17:31
- Visual Basic(VBA) ExcelのVBAコードについて教えてください。 1 2022/04/01 12:11
このQ&Aを見た人はこんなQ&Aも見ています
-
「どうして捨てられないの?」前妻の物を捨てられない男性の心理って?
前妻の物を捨てられない理由に加え、捨てるための手段はあるのかを専門家に聞いてみた!
-
エクセル ドロップダウンリストに検索機能を追加したい
Excel(エクセル)
-
エクセルで、入力したい品名の最初の文字を入力した時に、候補を表示する方法
Excel(エクセル)
-
【Excel】ドロップダウンリストの昇順、昇順
Excel(エクセル)
-
-
4
エクセルでサジェスト機能っぽいこと。セル範囲が非常に多くても適用させる方法とは
Excel(エクセル)
-
5
EXCELで他のファイルデータをドロップダウンさせるには?
その他(コンピューター・テクノロジー)
-
6
エクセルでリストから検索した時の複数候補の表示方法
Excel(エクセル)
-
7
ドロップダウンリストを2列で表示するには?
その他(ソフトウェア)
-
8
検索窓とプルダウンメニュー機能の作り方で困っています。どなたか教えてい
JavaScript
-
9
プルダウンと入力を両方行う検索窓を作りたい
HTML・CSS
-
10
Excel2016でプルダウンのメニューをすべて表示する
Excel(エクセル)
-
11
EXCELで特定のセルに表示された項目をヘッダーやフッターに出力するには
Excel(エクセル)
-
12
文字の色も参照 VLOOKUP
Access(アクセス)
-
13
Excelの入力規則で2列表示したい
Excel(エクセル)
-
14
エクセルのセルにカレンダーを表示させ、日付をセルに入力させたい
Excel(エクセル)
-
15
エクセルで「あいまい検索」を行いたい。
Excel(エクセル)
-
16
4~6月の給料で税金が決まるそうですが教えて下さい
投資・株式の税金
-
17
契約書の印紙の消印は、甲乙2社が押すべき?
その他(法律)
-
18
EXCEL入力規則のリスト表示から空白行を表示させない方法
その他(Microsoft Office)
-
19
「社長様いますか」という営業電話に、そろそろガツンと言いたい
ビジネスマナー・ビジネス文書
-
20
エクセル indirectリスト表示されない
Excel(エクセル)
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
プルダウンとテキストの連動
-
JQuery selectが反映されない
-
html selectの内容を初期値に戻す
-
IDの取得、繰り返しに問題があ...
-
フォームが空欄の時にフォーム...
-
tableの任意行にfocusをあてる
-
onclickで2個指定するには?
-
配列のチェックボックスをjavas...
-
ダミーフォームの内容を送信用...
-
条件により、リンク先に画面遷...
-
大量のselect要素のvalueを短い...
-
onchangeイベントを強制的に発...
-
value内に変数を入れたい
-
return trueとreturn falseの用...
-
formを書き換えて送信する方法
-
HTML中のTABLEのデータを抽出す...
-
2段階プルダウンで1段階目の選...
-
クリックさせたいが、click()が...
-
focus()が上手くいかない
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
Selectボックスの幅を自動で広...
-
Selectの中身をfor文で入れる
-
html selectの内容を初期値に戻す
-
JQuery selectが反映されない
-
jQuery セレクトボックスで選択...
-
CSVファイルを読みこみ、プルダ...
-
セレクトを全て選択されていな...
-
現在時刻を取得してフォームのs...
-
セレクトの値を取得できない
-
リストボックスの項目の順番を...
-
onchange等のイベントハンドラ...
-
テーブルにおける行(セルにプル...
-
onFocusOutが複数回呼ばれる!
-
javascriptでプルダウンメニュ...
-
ブラウザの戻るボタンを押した...
-
<textarea>にプルダウンを表示...
-
javascriptでの2つのプルダウン...
-
selectタグに直接onChangeを書...
-
window.openで新しいタブが開か...
おすすめ情報