プルダウンメニュー連動でテキストを切り替えるスクリプトをjQueryで組んでみた
2018/08/30
ちょっとした事ですが、プルダウンメニューを選択した際に、指定のテキストを表示させるスクリプトを作って欲しいという要望があったので、久々にjQueryで作ってみました。
似たようなことは恐らく近いうちにまた必要になると思うので、コピペで使えるようにするのが今回のポストの目的ですｗ
プルダウン選択値で任意のテキストを表示させる方法
イメージ
メーカープルダウンを選択すると、
型番が表示されるという仕様。
フォームを扱うユーザに対する、ちょっとしたヘルプといった感じでしょうか。
デモはこちらから
スクリプト
ということで、早速スクリプトの公開。
phpの中で使いたいという要望だったので、phpの配列を使っています。
php
元となるマスタ配列。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// 型番マスタ $mtType = array( '1' => 'AAA12345', '2' => 'BBB12345', '3' => 'CCC12345', '4' => 'DDD12345', '5' => 'EEE12345', ); // メーカーマスタ $mtMaker = array( '1' => 'メーカー１', '2' => 'メーカー２', '3' => 'メーカー３', '4' => 'メーカー４', '5' => 'メーカー５', ); |
css
非表示にするクラスです。
|
1 2 3 4 5 |
<style type="text/css"> .hide{ display: none; } </style> |
メイン部
phpで書いています。
8行目から、表示する型番(配列)を foreach を使って <p class="noteナンバー">?</p> を echo しています。
class を使って非表示としています。
17行目からはプルダウンを表示。セレクトのIDを「makerPulldown」とするのだけ注目。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
echo '<table border="1" cellpadding="5" cellspacing="0">'."\n"; echo '<tr>'."\n"; echo '<th>型番</th>'; echo '<th>メーカー</th>'; echo '</tr>'."\n"; echo '<tr>'."\n"; echo '<td class="targetTd" width="200">'."\n"; echo '<p id="note0">ここに表示</p>'."\n"; // 表示させるテキスト foreach ($mtType AS $k => $v) { echo '<p id="note' . $k . '" class="hide">' . $v . '</p>'."\n"; } echo '</td>'."\n"; echo '<td>'."\n"; // プルダウン echo '<form action="#">'."\n"; echo '<select name="maker" id="makerPulldown">'."\n"; echo '<option value="0">▼選択</option>'; foreach ($mtMaker AS $k => $v) { echo '<option value="' . $k . '">' . $v . '</option>'."\n"; } echo '</form>'."\n"; echo '</td>'."\n"; echo '</tr>'."\n"; echo '</table>'."\n\n"; |
javascript
ではお待ちかねjavascriptスクリプト部分です。
ヘルプを書いているので、その通りの事をしております。
選択したプルダウンの内容の key を取得し、その key と同じ noteナンバーのテキストを表示させる、といったことをしております。
かなり単純。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type="text/javascript"> $(function(){ $('#makerPulldown').change(function(){ // 選択されたオプションのkey番号を取得 var num = $('#makerPulldown').val(); // 選択値以外に class="hide" を追加 $(".targetTd p[id != 'note+num']").addClass('hide'); // 取得したkey番号の class="hide" を削除 $("p#note"+num).removeClass('hide'); }); }); </script> |
さほど凝ったことはしていませんが、
|
1 |
$(".targetTd p[id != 'note+num']").addClass('hide'); |
この部分、「否定」の文法だけは覚えておいて損はないかと思います。