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

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

Javascriptでプルダウンの選択を変更するのは、テキストフォームにデータを突っ込むんだり、ラジオボタンの選択を変更するのとは違い少々面倒です。

<script>
function change_pulldown(){
pulldown_option = document.getElementById("hoge").getElementsByTagName('option');
for(i=0; i<pulldown_option.length;i++){
if(pulldown_option[i].value == "クラブマンハイレッグ"){
pulldown_option[i].selected = true;
break;
}
}
}
</script>

<p><a href="javascript:void(0)" onclick="change_pulldown()">「クラブマンハイレッグ」を選択</a></p>

<select id="hoge">
<option value="イングラム">イングラム</option>
<option value="グリフォン">グリフォン</option>
<option value="タイラント2000">タイラント2000</option>
<option value="クラブマンハイレッグ">クラブマンハイレッグ</option>
</select>

簡単に説明しますと以下のようになります。

１．selectにidをつける（ここでは"hoge"にしました）
２．そのタグの中にあるoptionタグのデータを、getElementsByTagName('option');で配列取得する
３．取得したoptionデータをforループでまわし、optionのvalueデータと選択させたい内容とをifで照らし合わせ、一致したらselected=trueにする。

■サンプル　[新しいウィンドウで開く]　※サンプルは上記のソースに少し手を加えています。