select 内の option 要素(セレクトボックス)を JavaScript で追加していく

すごく単純なことなのですが、検索しても2002年の化石のような記事や質問サイトでの短いやり取りばかりだったり、
運良く見つけてもレガシーだったり効率の悪い書き方でコードの行数が膨大にあったり……で軽く絶望したので、普通のやり方を書き残しておきます。
基本的すぎることって、ネットにはなかなか書かれていないんですね。

例)「やればできる NETSCAPE道場」みたいな感じの時代を感じるサイトばかりでビックリしました;  


★簡単な説明つきコード

このような手順になっております。 たったこれだけでお終いなのですが、検索すると .length を使ったり50行くらいあったりする謎の書き方が沢山出てくるので。


★この書き方を応用すると

連想配列にした項目を for in で展開しながら、 <option value="配列のインデックス">配列の中身</option> として書き出していっています。
サンプルのような国名の羅列や、都道府県や年代などの項目の多いセレクトボックスを作成する場合、何十行も HTML に option を直接書き連ねるのは非効率的ですし、メンテナンス性も低下します。
そんなとき、配列を少し編集すれば自由に値を増減/並べ替えできるスクリプト言語を用いたテキストボックスが実装できれば、作業は効率的になりますよね。
PHP でやれば手っ取り早いのですが、PHP が使えない/使いたくない状況も考えて。

 

#Tips このようなコードを <head> 内に書くと、ブラウザが要素の構造を認識する前にスクリプトが発動してしまうため、正常に動作しません。 <script> は </body> (body終了タグ) の直前に書きましょう。

 

 

本当は、JQuery を使えば for in 内は

の1行で解決するのですが、素の JavaScript で書こうとして appendChildappend の使い勝手の違いに気付かず数時間潰してしまったので、メモ。
どうやら appendChild では JQueryappend のように無理やり文字ごと追加したりできないようですね。むむむ。

 

ではではー★