Eyecatch jQuery

Javascript,jQuery

プルダウンメニュー連動でテキストを表示させるスクリプトをjQueryで組んでみた。

2015/05/23

ちょっとした事ですが、プルダウンメニューを選択した際に、指定のテキストを表示させるスクリプトを作って欲しいという要望があったので、久々にjQueryで作ってみました。

似たようなことは恐らく近いうちにまた必要になると思うので、コピペで使えるようにするのが今回のポストの目的ですw

プルダウン選択値で任意のテキストを表示させる方法

イメージ

メーカープルダウンを選択すると、
jquery_pulldown_01

型番が表示されるという仕様。
jquery_pulldown_02

フォームを扱うユーザに対する、ちょっとしたヘルプといった感じでしょうか。

デモ

デモはこちらから

スクリプト

ということで、早速スクリプトの公開。
phpの中で使いたいという要望だったので、phpの配列を使っています。

php

元となるマスタ配列。

css

非表示にするクラスです。

メイン部

phpで書いています。
8行目から、表示する型番(配列)を foreach を使って <p class="noteナンバー">~</p> を echo しています。
class を使って非表示としています。

17行目からはプルダウンを表示。セレクトのIDを「makerPulldown」とするのだけ注目。

javascript

ではお待ちかねjavascriptスクリプト部分です。
ヘルプを書いているので、その通りの事をしております。

選択したプルダウンの内容の key を取得し、その key と同じ noteナンバーのテキストを表示させる、といったことをしております。
かなり単純。

さほど凝ったことはしていませんが、

この部分、「否定」の文法だけは覚えておいて損はないかと思います。

ドラゴンズクラウン - PS3

ドラゴンズクラウン - PS3

価格 : 2,400円

     

-Javascript,jQuery
-, , , , ,