javascriptでselectの選択肢を変更する方法を紹介します。selectタグ内の一つ一つのoptionのvalue属性を設定していれば、簡単に実装できます。
以下のようなhtmlがあったとします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<script type="text/javascript"> // input1に入力された値に対応する選択肢に切り替えます。 function changeOptions () { var input1 = document.getElementById("input1"); var val = input1.value; var select1 = document.getElementById("select1"); select1.value = val; } </script> <select id="select1"> <option value="option1">選択肢1</option> <option value="option2">選択肢2</option> <option value="option3">選択肢3</option> <option value="option4">選択肢4</option> </select> <input id="input1"> <button onclick="changeOptions()">変更</button> |
セレクトボックスのoptionには、option1～option4の値を割り当てています。
以下の入力ボックスに、option1,2,3,4のいずれかを入力し、反映ボタンをクリックしてください。対応する選択肢にセレクトボックスの値が変更されることがわかると思います。
このように、セレクトボックスの選択肢変更は、
① optionタグのvalue属性に値を設定し、
② javascript側で「select.value = “値”」と書く
ことで実現できます。