【Javascript】セレクトボックスの選択肢を外部ファイルにしておく

参考

qiita.com

本文

基本的にこの記事に書いてあるとおり

プルダウンの選択肢を事前に分けて、list.jsという名前で保存しておく
list.jsをhtmlソースコードの上の方で読み込む

<script type="text/javascript" src="js/list.js"></script>

bodyの下の方でscriptタグを用意して
その中に、データを読み込む関数を書く

function readFirst(){
for(var i=0;i<list.length;i++){
let opt = document.createElement("option");
opt.value = list[i].val; //value値
opt.text = list[i].txt; //テキスト値
document.getElementById("PullDownList").appendChild(opt);
}
};

listという配列はlist.jsの中に用意しておく
必要な要素は
{val:"1", txt:"P1"},
こんな感じ
txtは選択肢として表示される名前
valは選択されたときに渡される値
これがlistの個数だけ繰り返される

あとはこの関数をhtmlの読み込み完了後に実行すれば良い

元記事ではbodyタグにonloadを実行させて、読み込もうとしているが自分のところではうまくいかなかった
代わりに
window.onload = readFirst();
とbodyの下の方のjavascriptに書いたら動いた
なぜbodyのonloadではだめなのかは不明

どこまでjavascriptが動いているかをテストしたかったら
console.log('Hello1');
とか書けば、動いているのかわかる

ランキング参加中です

↓クリックしていただけると嬉しいです〜