2008年11月18日火曜日

jQueryでSelectの表示を変えるプラグイン



元ネタは、こちらを参考にさせていただきました。



プルダウンで都道府県などを入力(選択)するイライラを解消するPrefSupport.js


http://moto-mono.net/2008/07/19/prefsupport.html



プルダウンでたくさんの選択肢を表示するときに、スクロールバーがでてしまうのは


どうも、不恰好だなぁと思ったことのあるかたなら、利用してみてください。


デモ


JQueryでselectタグのプルダウンをカスタマイズする demo


ダウンロード


jquery.cs.js


利用には、jQueryが必要です。


追記(2009/11/20):jQuery-1.3.2 に対応いたしました。








特に、デザイン的に配慮はあまりしていませんので、シックで無骨な感じが気になる方は


素敵なデザインでサンプルを作ってもらえるとうれしいです。


プログラム的に、いろいろ悩んだところは


select タグをクリックすると、デフォルトのプルダウンが即座に出てしまうのを


Javascriptでどうやって制御するのかに苦労しました。


ブラウザごとに、プルダウン表示のタイミングが違うみたいで最終的に



1 mousedown event 取得
2 focus 実行
3 select disabled 属性 ture
4 blur 実行
5 event stop 実行


この順番で、処理をすると、意図した通りになりました。


(IE6,IE7,FF3,GC)


この辺は、ソースを見てもらえればわかると思います。


また、もっと上手な方法があるよーって方は、教えてもらえるとうれしいです。





8 件のコメント:

roo さんのコメント...

「jquery.cs.js ver 0.1」を利用させたいただきました。
有用なプラグインありがとうございます。

IE6,7 での動作ですが、フォーカスが複数になってしまいます。
例えば、デモサイト(http://www.jextend.com/sample/cs.html)の都道府県プルダウンにおいて、

 1)北海道を選択
 2)青森県を選択

この状態でプルダウンが開かれると「北海道」と「青森県」の両方がフォーカスされた状態になります。
一番最後に選択した「青森県」のみフォーカスされているのが望ましいと思います。
ご対応は可能でしょうか。

お忙しいとは存じますが、よろしくお願いいたします。

bushimichi さんのコメント...

roo さんコメントありがとうございます。
IE6,7で不具合ですね。すみません。
ちょっと、お時間いただけたら調整してアップしなおしておきます。

bushimichi さんのコメント...

IE6,IE7でのフォーカスが2重にされてしまうBugを修正いたしました。
IEのEvent処理が、JQueryからうまく呼び出せないようで
フォーカスを初期化する部分などに問題がありました。

roo さんのコメント...

bushimichiさん
Version 0.2 のアップありがとうございます。
バッチリです!
お忙しい中ご対応いただきまして、本当にありがとうございました。

ma さんのコメント...

こんばんは。
丁度こういうものを探していて早速使わせて頂いたのですが、
jQuery v1.3.2 ではうまく動作しませんでした。
IE7では、「catch ステートメントでは適用されますが、 throw ステートメントでは
適用されません」というエラーが表示されます。エラーはjQuery.js内で出ているようです。
Firefoxではエラーは出ないのですが、選択しても反映されません。

jQeryの他のプラグインは1.3.2で合わせていてこれだけ1.2.6 というわけにもいかず
困っております。
なにか回避する方法などありますでしょうか?

お忙しいところ申し訳ありませんが、何かアドバイスを頂けませんでしょうか?
よろしくお願いします。

ok_2nd さんのコメント...

こんにちは。
個人または家族で使える自宅用のWebポータルシステム「MyHome Portal」をオープンソースとして公開しています。
http://ok2nd.web.fc2.com/
MyHome Portal Ver.2.19で追加した住所録の都道府県選択プルダウンで、jquery.cs.jsを使わせていただきました。
ありがとうございます。
http://ok2nd.web.fc2.com/download.html
http://ok2nd.blog87.fc2.com/blog-entry-134.html

通りすがり さんのコメント...

チェンジされた後のイベント処理が出来ません。
例えば、都道府県を選択された後に住所を表示するような事が出来ない・・・

maxwel さんのコメント...

縦書きのグループ分けプルダウンが欲しくて使わせてもらおうと思いましたが
静的なselectではうまくいくんですが動的に生成したときにはうまくいきません。
回避策があれば教えてください。