| ブログトップ | JavaScript関連 |

Javascriptでプルダウンの選択を変更する(jQuery)

Javascriptでプルダウンの選択を変更する(getElementsByTagName)

↑過去記事のjquery版です。

headタグ内に以下を記述。


<script type="text/javascript" src="(jqueryへのパス)"></script>
<script>
function change_pulldown(value_name){
$("#hoge").val(value_name);
}
</script>

bodyタグ内に、以下の様な選択を記述。


<p>特殊車両リンクをクリックしてください。プルダウンの選択が変わります。</p>
<p><a href="javascript:void(0)" onclick="change_pulldown('p1')">イングラム</a></p>
<p><a href="javascript:void(0)" onclick="change_pulldown('p2')">グリフォン</a></p>
<p><a href="javascript:void(0)" onclick="change_pulldown('p3')">タイラント2000</a></p>
<p><a href="javascript:void(0)" onclick="change_pulldown('p4')">クラブマンハイレッグ</a></p>
<select id="hoge">
<option value="">---</option>
<option value="p1">イングラム</option>
<option value="p2">グリフォン</option>
<option value="p3">タイラント2000</option>
<option value="p4">クラブマンハイレッグ</option>
</select>

Javascript内の記述は凄まじく簡略化されましたね。

  1. 下のselectタグに、IDとして「hoge」と設定しておく。
  2. リンクには、クリック時に作成したchange_pulldown関数を呼び出す設定をする。その際、引数として、プルダウンで選択したいvalueを渡す。
  3. change_pulldown関数では、指定したID(ここではhogeとしている)のselectタグに中身(val)を入れる。

これでリンクをクリックすると指定したものが選択されるようになります。

サンプル [新しいウィンドウで開く]

 

 

日々の生活にhappyをプラスする|ハピタス

このエントリーをはてなブックマークに追加

LINEで送る

総合管理者 | 2016年04月30日 | コメント(0) | トラックバック(1) | JavaScript関連

トラックバック

トラックバックURL

トラックバック一覧

[…] 2016年4月30日 jquery版はこちら […]

コメントする

※メールアドレスが公開されることはありません。

名前 *
メール*
URL
Copyright(c) 2010 - 2017 ダリの雑記