ドロップダウンリストをクリックした際に表示される選択肢を一度にたくさん表示するようにしたいのですが、そういう指定は可能でしょうか?ブラウザーはIEです。

デフォルトでは30行ぐらいしか表示されません。これを出来れば画面の上下いっぱいに表示したいです。

<select name=x>
<option value=x>x</option>
.......(項目数が100個ぐらい)
</select>

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2004/12/28 10:31:05
  • 終了:--

回答(7件)

id:chack2004 No.1

chack2004回答回数110ベストアンサー獲得回数02004/12/28 11:08:09

OKじゃないですか?

丁度100までのセレクトボックスを見つけました。

何のためにこれを設置しているのか良くわかりませんけど

id:eggi

すみません。

クリックしたときに一度にもっとたくさん表示したいんです。

教えて頂いたURLでも一度にはやはり30行ぐらいしか表示されません。

2004/12/28 11:11:02
id:chack2004 No.2

chack2004回答回数110ベストアンサー獲得回数02004/12/28 11:32:52

ポイント10pt

なるほど、そういうことでしたか。

でしたら、普通のプルダウンでは無理なので、こちらの方法なら可能です。

Javascriptの知識が必要になりますが、この例でボタン画像をポイントしたときに出てくるメニューはテーブルになっているので、横4列で25段のテーブルをこのメニューの中に入れてやれば100のメニューが同時に表示できるようになります。

このサンプルではジャンプ先がリンクになっていますが、VALUEを設定してCGIに値を与える形にも組めますよね。

id:eggi

ありがとうございます!

かなりぐりぐりと書かないといけないんですね。

HTMLのごく簡単な構文であっても良さそうな機能なのですけどねえ。

2004/12/28 11:45:13
id:amanoftaste No.3

amanoftaste回答回数42ベストアンサー獲得回数02004/12/28 14:02:19

ポイント30pt

select要素を

<select name=x onFocus=”this.size=100” onFocusout=”this.size=1”>

のようにしてみてください。

「100」となっているところは、

項目数に合わせてください。

シンプルで簡単なJavaScriptです。

ただ、フォーカスが外れないと元に戻らないので、

適当なところをクリックしてください。

id:eggi

ありがとうございます!

ほんのちょっと使い勝手が微妙ですが、非常にシンプルな変更ですみますし使い勝手自体は良さそうです。

2004/12/28 14:14:14
id:diabah_blue No.4

diabah_blue回答回数129ベストアンサー獲得回数12004/12/28 14:26:42

ポイント50pt

http://cubic9.com/test/hatena/select100/

はてな 1104197465 セレクトボックスのドロップダウン時の表示項目を増やしたい

回答3の方のパクリですが、少し普通の動作に近くしてみました。

IE6とFirefox1.0で動作確認済みです。

id:eggi

おお!かなりいい感じになりましたね!

はてな内でオープンソースが動いているようで気持ちいいですね。

ありがとうございます!

2004/12/28 14:37:08
id:siachan No.5

siachan回答回数80ベストアンサー獲得回数142004/12/28 14:53:36

ポイント50pt

4番の方と動作はほぼ同じですが、

▼を押す->画面の何も無いところを押す(閉じる)->▼を押す->選択する

とするとリストが展開してしまうのでそれが出ないようにということで。

id:eggi

おぉ。どんどん進化していく・・・。ありがとうございます。

確かにドロップダウンの値が何もなくなってしまうんですよね・・・。

1ページにいくつもドロップダウンをおけるような汎用的なのになったら完成というところでしょうか。(thisとかを引数にするのかな・・。setTimeoutのところが難しそうです。)

しかし既にかなりきれいな動作ですね。ありがとうございます。

2004/12/28 15:07:22
id:amanoftaste No.6

amanoftaste回答回数42ベストアンサー獲得回数02004/12/28 15:36:51

ポイント20pt

二回目の回答で申し訳ありませんが、

<select size=1 onClick=”if(this.size==1)this.size=100;else this.size=1;” onFocusout=”this.size=1;”>

これもまたシンプルです。

そこそこの動作をします。

id:eggi

ありがとうございます。

かなりシンプルできれいですね。

2004/12/28 17:05:28
id:diabah_blue No.7

diabah_blue回答回数129ベストアンサー獲得回数12004/12/28 17:03:16

ポイント20pt

http://cubic9.com/test/hatena/select100/#

はてな 1104197465 セレクトボックスのドロップダウン時の表示項目を増やしたい

2つ以上でも大丈夫になりました。

また、先程の回答でFirefoxでも動作確認と言いながら、全く動作していなかったので、そこも修正しました。

なお、横並びにすると下揃えになってしまうので、そこはCSSで上揃えにしています。

id:eggi

ありがとうございます!

Firefoxまで対応したいくつものサンプルを作って頂きありがとうございます。

HTMLでドロップダウンリストを使う際の弱点なので、結構使い勝手があると思います。

皆さんのおかげでかなりいいインターフェースが出来ました!ありがとうございました!

#もしかするとさらに力作を作成される方がおられるかもしれないので、一応募集は続けてみます。

2004/12/28 17:14:14

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません