ダリの雑記：WEBプログラム版

この記事は1年以上前の記事のため、内容が古い可能性があります。

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）を入れる。

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

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