web-dev-qa-db-ja.com

選択ボックスに対して長すぎる情報を表示する方法

フォームでは、選択ボックスを使用してテナンシーのリストを表示します。各テナントを識別できるように、テナントの完全な名前(最大4つのテナントが存在する場合があります)とプロパティの完全な住所を表示する必要があります。

これは、ページの幅全体に広がるため、選択ボックスに表示するには情報が多すぎると思います。

代替案を提案できますか?

5
Michael LB

有効な選択は1つだけなので、選択ボックスを使用していますか?各オプションをラジオボタンに変換するのはどうですか?

例えば https://jsfiddle.net/mz9a22cd/

9
kerr

同意します。たとえば、幅が5ワードを超えるドロップダウンメニューは扱いにくいものです。ユーザーはすべてのテキストを読むことができない(おそらく読むことができない)ため、追加の情報は、実際には理解することが少ないことを意味します。私は、a)情報の固有のサブセット(住所?)を見つけて、それを選択ボックスに入れるか、これを選択する別の方法(プロパティID、正しいプロパティを選択するのに役立つポップアップ付きの検索機能? )。

1
Daniel Griscom

(最大4つの)テナントのフルネームとプロパティの完全な住所を表示する必要があると述べています。この情報は常に表示する必要がありますか、それともユーザーが選択しているときにのみ表示する必要がありますか?

説明した完全な情報をユーザーが選択しているときにのみ表示する必要がある場合は、省略形の情報がリストに(おそらくラジオボタンで)使用され、完全な情報がマウスオーバーで表示される場合があります。使用できる場合、省略された情報は、少なくともユーザーに「ヒント」を与えるのに十分なほど明確でなければならないので、ユーザーは選択肢をいくらか区別し、追加の「マウスオーバー」情報を介して選択を確認できます。

選択すると、選択したオプションの完全な情報を表示し、残りのオプションに関する情報を省略して表示することもできます。完全な情報はマウスオーバーで利用できます。

1
David

私の提案は、情報を1行に入れるのではなく、より読みやすい方法にすることです。あなたがアドレスを読む場合、あなたは次のようなものを期待するでしょう

名前
通り
市/郵便番号

の代わりに

名前、通り、都市、郵便番号

では、このようにしてSelectlistにデータを入力してください。この方法では、ユーザーはさらに下にスクロールする必要がありますが、適切なテナンシーを見つけるのは簡単です。

enter image description here

0
BrunoH

これは、BrunoHが提案するものに似ています。
http://grasshopperpebbles.com/demos/multilinelist/get_selected
サンプルは、多くのコードの後、ページの下部にあります。
このプラグインをお勧めするわけではありません。複数行の選択によるアーティファクトの例を示すだけでした。
mustにいくつかの名前を表示し、利用可能な画面の幅が十分でない場合、残っている唯一のオプションは、テキストを複数行に分割することです。

0
Juan Lanus