JQuery、セレクトボックスをループ化したい。

IE11で、セレクトボックスで1～23（例えば）を選べるとして、23から下へスクロールしたら1へ戻る＆1から上へスクロールしたら23へ行くというコンボボックスをFacebookで見かけたんですが、そのようなセレクトボックスを作るにはどう実装したらいいでしょうか？

できればプラグインは無しでJQuery本体だけがいいです。
css（css3）が絡んでも可です。

No.2 ベストアンサー 回答者： fujillin 回答日時： 2018/01/23 12:55

こんにちは

＞そのようなセレクトボックスを作るにはどう実装したらいいでしょうか？

セレクト要素の制御を途中でピックアップできるかどうか試してみましたが、通常表示の場合は、未選択の段階（ホバー状態）でどのオプションが選ばれているかを取得するのは難しいようでした。
size指定した場合には、Fx、Chromeではオプション要素でhoverイベントが発生するようですが、IEでは発生しないようです。
無理やり位置を把握する方法として思いつくのは、マウスの位置を監視して、そこから計算するという方法ですが、少々面倒ですね。

それなので、別途、自作のリストなどでオプションと同じ内容を表示して循環させるような方法のほうが、結果的に楽に実現そうな気がします。
このように別要素で表示する方法は、入力要素をカスタマイズするライブラリなどでもよく用いられている方法だと思います。（見た目や使い勝手を元のセレクトと同じようにしておけば、まず違和感はないでしょう）

セレクト-オプションそのままでは上記のようにマウスの変化の取得がうまくいきませんが、リスト等にしておけばそのままmouseoverやclickイベント等が取得できますので、ユーザの操作に応じた対応が可能になります。
実質的にはリストの1行を（先頭または最終へ）循環させる処理を作成しておいて、それを繰り返し呼び出せば済みそうですね。

ただし、（循環のために）表示位置がスクロールすると、マウスの位置と要素の関係がずれると想像しますので、そのあたりのUIをどのようにしておくのかは一考の余地がありそうです。

この回答へのお礼

ご回答ありがとうございます。マウスを使うのみであれば、divを下に足らして、z-index上にして擬似でできるのはできそうですが、キーボードの上下でも制御ができるかというのもあるので・・・あとから色々考えて、数字のスピナーもありかなー？と。本当はプラグインいれたくないですがUIのスピナーを上手く応用するといけるような気はしてますが・・・一応もう少し探してみます。

お礼日時：2018/01/24 21:55

No.1 回答者： あつしノリノリ 回答日時： 2018/01/23 07:22

if文を使って下さい。

この回答へのお礼

判定をどうするかを考えないとダメですかねー

お礼日時：2018/01/23 20:07