sugulogの日記

JavaScript、innerHTML!都道府県プルダウンを作成しよう!!

スポンサードリンク

f:id:sugulog:20210722162847p:plainこんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、JavaScriptとinnerHTMLいうことで

  •  都道府県プルダウンを作成しよう

について簡単に解説します!!

その為このブログを読むことで、innerHTMLについて理解が深まるのはもちろん、都道府県プルダウンを作成できるようにもなります。

是非最後までご愛読ください。

 

今回は、

都道府県プルダウンを作成しよう

の順で解説していきます。

では早速、みていきましょう!!

都道府県プルダウンを作成しよう

まずはHTMLでselect要素だけ記述します。

f:id:sugulog:20210722181230p:plain

次にJavaScriptです。

f:id:sugulog:20210722181238p:plain

まずはoption要素に適用するための都道府県が格納された配列を定義し、select要素を取得します。

今回は初期表示として「都道府県を選択してください」を表示させたいため、まず始めに変数optionに定義しています。

ポイントとしては文字としてoption要素も記述し代入することです。

このような形で代入することにより後でinnerHTMLを使いselect要素に適用する際に、文字のoption要素がHTMLタグとして処理されます。

for文では初期値を0とし更新処理で1ずつ増やし処理条件としてjapanList.lengthを定義することで、配列要素の数分処理を繰り返しています。

for文の中では加算代入を使用し、変数optionに都道府県のoption要素を加算しています。

また今回opton要素のvalueとしてi + 1と定義することで1~47の値が入るようにし、japanList[i]とすることでiには0~46の番号が順に入るので配列の要素が1つずつ取り出されます。

最後にoption要素を大量に代入した変数optionをinnerHTMLでselect要素に適用します。

では実際にプルダウンを見てみましょう。

f:id:sugulog:20210722183913g:plain

 

以上、今回のブログでした。

innerHTMLについて理解が深まり、都道府県プルダウンを作成できるようにもなりましたか??

配列やfor文の理解も必要な実装です。

少し難しいなと感じた場合はしっかりと復習しましょう(^_^)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!