2008-11-17 jQueryでSelectの表示を変えるプラグイン
jQueryでSelectの表示を変えるプラグイン
jQuery, javascript | | 
元ネタは、こちらを参考にさせていただきました。
プルダウンでたくさんの選択肢を表示するときに、スクロールバーがでてしまうのは
どうも、不恰好だなぁと思ったことのあるかたなら、利用してみてください。
デモ
JQueryでselectタグのプルダウンをカスタマイズする demo
ダウンロード
利用には、jQueryが必要です。
追記(2009/11/20)：jQuery-1.3.2 に対応いたしました。
特に、デザイン的に配慮はあまりしていませんので、シックで無骨な感じが気になる方は
素敵なデザインでサンプルを作ってもらえるとうれしいです。
プログラム的に、いろいろ悩んだところは
select タグをクリックすると、デフォルトのプルダウンが即座に出てしまうのを
Javascriptでどうやって制御するのかに苦労しました。
ブラウザごとに、プルダウン表示のタイミングが違うみたいで最終的に
1 mousedown event 取得 2 focus 実行 3 select disabled 属性 ture 4 blur 実行 5 event stop 実行
この順番で、処理をすると、意図した通りになりました。
この辺は、ソースを見てもらえればわかると思います。
また、もっと上手な方法があるよーって方は、教えてもらえるとうれしいです。
Midlife: A Beginner's Guide to Blur
有用なプラグインありがとうございます。
IE6,7 での動作ですが、フォーカスが複数になってしまいます。
例えば、デモサイト(http://www.jextend.com/sample/cs.html)の都道府県プルダウンにおいて、
１）北海道を選択
２）青森県を選択
この状態でプルダウンが開かれると「北海道」と「青森県」の両方がフォーカスされた状態になります。
一番最後に選択した「青森県」のみフォーカスされているのが望ましいと思います。
ご対応は可能でしょうか。
お忙しいとは存じますが、よろしくお願いいたします。
IE6,7で不具合ですね。すみません。
ちょっと、お時間いただけたら調整してアップしなおしておきます。
IEのEvent処理が、JQueryからうまく呼び出せないようで
フォーカスを初期化する部分などに問題がありました。
Version 0.2 のアップありがとうございます。
バッチリです！
お忙しい中ご対応いただきまして、本当にありがとうございました。
丁度こういうものを探していて早速使わせて頂いたのですが、
jQuery v1.3.2 ではうまく動作しませんでした。
IE7では、「catch ステートメントでは適用されますが、 throw ステートメントでは
適用されません」というエラーが表示されます。エラーはjQuery.js内で出ているようです。
Firefoxではエラーは出ないのですが、選択しても反映されません。
jQeryの他のプラグインは1.3.2で合わせていてこれだけ1.2.6 というわけにもいかず
困っております。
なにか回避する方法などありますでしょうか？
お忙しいところ申し訳ありませんが、何かアドバイスを頂けませんでしょうか？
よろしくお願いします。
個人または家族で使える自宅用の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
お返事遅くなり申し訳ございません。
コメントされてることに気がついておりませんでした。m(_ _)m
jQuery-1.3.2 の対応をさせていただきました。
selector の指定で @ が使えなくなっていたので1.3.2用に変更しました。
利用報告ありがとうございます。
少しでも役に立っていれば光栄です。どんどん使ってくださいね。
例えば、都道府県を選択された後に住所を表示するような事が出来ない・・・
静的なselectではうまくいくんですが動的に生成したときにはうまくいきません。
回避策があれば教えてください。
お返事遅くてすみません。
そうですね。
他の処理とミックスするとうまく動かないかもしれませんね。
ちょっと、改造できるか検討してみます。
＞maxwel さん
お返事遅くなりすみません。
動的にselectを生成した場合でも、再度 $(xxx).cs(); 実行していただけたらいけるかと思います。ちょっと試してないのですが、デモに追加できたら追加してみます。