NeGiMeMo.net

ねぎさんのメモ帳。日常・メモ・ときどきWordPress。

リストからjQueryでドロップダウンリストを作って画像を差し替える

bell賞味期限切れコンテンツ

この記事は公開または最終更新から822日くらい経過しています。
このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。

あんまり使い道は無いかもしれないですが…。

例えば、マニュアルをスキャンしたものをウェブ上で閲覧できるようにして、ページをプルダウンメニュー(ドロップダウンリスト)で選びたい、みたいな時でしょうか?

そんな機会がどれだけあるかは判りませんが、つい最近そういうのを作る機会があったのでやり方をメモしておこうと思います。

ドロップダウンリストは select 要素と option 要素でできますよね。
で、 jQuery で select を監視して change イベントで選択中の option から画像のURLを取り出すのは簡単にできそうです。

ですが、お客さんが更新しようとすると、意外と select とか option って馴染みが薄かったり、CMSでも作れるボタンがついてるものはあまり聞きません(というか自分は知らないです…)

なので、今回はどんなCMSでも大抵ついているリスト生成機能を利用して、リストからドロップダウンリストを生成する機能もつけてみようと思います。

仕様

  • ドロップダウンリストは特定のIDを持つリスト要素で管理
  • リストの中にリンクを作り、画像にリンクする
  • リンクのテキストをドロップダウンリストのアイテムのラベルにする
    また、出力する画像の ALT タグにも指定する
  • リストに特定のクラスを与えればデフォルトで選択状態のものを変更できる

みたいな感じにしようと思います。
CMSのリスト機能だとものによっては直接はクラスを指定できなかったりする場合もありますがそこはとりあえず今回は HTML で書くものとします。

(運用にあたり、事前にクラス付きのリストを制作サイドで作っておいて、お客さんにはそのリストの中身だけいじる(リスト全消しはしない)ようにしてもらう)

あ、でもWordPressなら AddQuicktag みたいなプラグインとかで ID 持ちの ul とか登録しておいてもいいかもしれませんね。(今回は検証してませんが…。)
他のCMSでも似たようなプラグインや拡張があればその方法がつかえるかもしれません。

コード

html

 javascript(別途 jQuery を読み込んでおいてください)

簡単な解説

やってることとしては、大きく3段階あります。

select 要素の生成

まずリストのうしろに select 要素を追加し、その中にリストの中身をみながら option 要素を作っていきます。

リストの後ろに追加するには、

ってかんじです。

option 要素の追加は、

 みたいな感じでかんたんに追加できますので、これを使いますが、その際に li 要素が selected というクラスを持っているかをチェックし、もっていたら option 要素に selected=”selected” を追加します。

ここ attr でやろうとおもったんですがうまい方法が思いつきませんでした…。きっともっといい方法が有るかもしれません…。

ドロップダウンリストのボックスが出来上がったらもうもとのリストは不要ですので remove() で消すなり、 hide() で隠すなりでいいかとおもうので今回は remove() しちゃいました。

初期画像を書き出す

今回は今追加したセレクト要素の次のところに画像を書き出しますので、再び after で追加してます。で、そのあとその中に空の画像をセットして、それの src と alt を現在セレクト要素で選択されているものにあわせて書き換えます。

選択中の option の中身をとるには、セレクト要素を選択した上で、

でいけますので、

みたいな感じでセットできます。

ここまでで画像の表示まで完了しました。今回は読込中のメッセージもだしてたので、このタイミングでそれも消してますが、一瞬で終わってしまうのでそもそもメッセージなくてもいい可能性も有ります。この辺はおこのみで。

ドロップダウンリストの変更を監視

最後に、ドロップダウンリストを監視し、変化があったらそれに併せて画像を書き換えます。

変更を監視するなら change() が楽です。

変更があったら、また選択済みになっているアイテムを調べて、 src と alt を書き換えます。

ここは先程の初期画像を出力するのとやってることは同じですので、2回書いてもアレですから関数にしちゃいました。

で、呼び出す時は

ってかんじです。

デモ

まだまだ改善の余地はありそうですが、とりあえず大まかにはこんな感じでしょうか?

なんかのヒントになれば…。

TAGS