タグ:getElementsByTagName

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

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>

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

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

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

nandani | 2010年07月18日 | コメント(0) | トラックバック(1) | JavaScript関連

Copyright(c) 2010 - 2024 ダリの雑記