プルダウンメニュー連動でテキストを切り替えるスクリプトをjQueryで組んでみた

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

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

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

イメージ

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

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

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

デモはこちらから

スクリプト

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

php

元となるマスタ配列。

[php]
// 型番マスタ
$mtType = array(
'1' => 'AAA12345',
'2' => 'BBB12345',
'3' => 'CCC12345',
'4' => 'DDD12345',
'5' => 'EEE12345',
);

// メーカーマスタ
$mtMaker = array(
'1' => 'メーカー１',
'2' => 'メーカー２',
'3' => 'メーカー３',
'4' => 'メーカー４',
'5' => 'メーカー５',
);
[/php]

css

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

[html]

[/html]

メイン部

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

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

[php]
echo '

'."\n";
echo '

'."\n";
echo '

';
echo '

';
echo '

'."\n";
echo '

'."\n";
echo '

'."\n";

echo '

'."\n";
echo '

'."\n";
echo '

型番	メーカー
'."\n"; echo ' ここに表示 '."\n"; // 表示させるテキスト foreach ($mtType AS $k => $v) { echo ' ' . $v . ' '."\n"; } echo '	'."\n"; // プルダウン echo ' '."\n"; echo ''."\n"; echo '▼選択'; foreach ($mtMaker AS $k => $v) { echo '' . $v . ''."\n"; } echo ' '."\n"; echo '

'."\n\n";
[/php]

javascript

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

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

[js]

[/js]

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

[js]
$(".targetTd p[id != 'note+num']").addClass('hide');
[/js]

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

-Javascript,jQuery
-select, プルダウン連動, 連動