HTMLで、47都道府県を option タグで書いてもいいですが、見やすく・メンテナンスしやすいようにJavaScriptの .createElement() メソッドで記述することが可能です。
かかかず
フォームのHTML構造はごちゃつきやすいので、JavaScriptで書く方法を解説します。
サンプルとあわせて参考にしてみてください。
.createElement()
JavaScriptの document.createElement() は、指定された HTML 要素を生成するメソッドです。
let element = document.createElement(tagName[, options]);この記事では、このメソッドに for 文のループを併用してセレクトボックスを作ります。
セレクトボックスのサンプル
早速サンプルです。
以下に「都道府県を選択してください。」と表記のあるボックスを選択すると、各都道府県がそれぞれ表示されます。
選択すると、ボックスの上部に吹き出しで選択された都道府県が表示されます。
かかかず
よくある都道府県のセレクトボックスです。
実装の手順と方法
各コードの解説の前に、実装の手順と方法について簡単にご説明します。
HTMLを記述
はじめに、設置したい場所にHTMLのコードを記述します。
<div class="todoufukenBox">
<p id="target"></p>
<select id="todoufuken" onchange="onsel(this);"></select>
</div>JavaScriptを記述
次に、JavaScriptのコードをページに記述します。
コードは <body>〜</body> で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。
window.addEventListener('load', (event) => { //ロードが完了したら
var inner = [ // 都道府県を作成
{cd:"", label:"都道府県を選択ください。"},
{cd:"1", label:"北海道"},
{cd:"2", label:"青森県"},
{cd:"3", label:"岩手県"},
{cd:"4", label:"宮城県"},
{cd:"5", label:"秋田県"},
{cd:"6", label:"山形県"},
{cd:"7", label:"福島県"},
{cd:"8", label:"茨城県"},
{cd:"9", label:"栃木県"},
{cd:"10", label:"群馬県"},
{cd:"11", label:"埼玉県"},
{cd:"12", label:"千葉県"},
{cd:"13", label:"東京都"},
{cd:"14", label:"神奈川県"},
{cd:"15", label:"新潟県"},
{cd:"16", label:"富山県"},
{cd:"17", label:"石川県"},
{cd:"18", label:"福井県"},
{cd:"19", label:"山梨県"},
{cd:"20", label:"長野県"},
{cd:"21", label:"岐阜県"},
{cd:"22", label:"静岡県"},
{cd:"23", label:"愛知県"},
{cd:"24", label:"三重県"},
{cd:"25", label:"滋賀県"},
{cd:"26", label:"京都府"},
{cd:"27", label:"大阪府"},
{cd:"28", label:"兵庫県"},
{cd:"29", label:"奈良県"},
{cd:"30", label:"和歌山県"},
{cd:"31", label:"鳥取県"},
{cd:"32", label:"島根県"},
{cd:"33", label:"岡山県"},
{cd:"34", label:"広島県"},
{cd:"35", label:"山口県"},
{cd:"36", label:"徳島県"},
{cd:"37", label:"香川県"},
{cd:"38", label:"愛媛県"},
{cd:"39", label:"高知県"},
{cd:"40", label:"福岡県"},
{cd:"41", label:"佐賀県"},
{cd:"42", label:"長崎県"},
{cd:"43", label:"熊本県"},
{cd:"44", label:"大分県"},
{cd:"45", label:"宮崎県"},
{cd:"46", label:"鹿児島県"},
{cd:"47", label:"沖縄県"}
];
// ループで option を生成
for(var i=0;i<inner.length;i++){
let op = document.createElement("option"); //optionタグを生成
op.value = inner[i].cd; // cdを追加
op.text = inner[i].label; // ラベルを追加
document.getElementById("todoufuken").appendChild(op); // optionタグを追加
}
//1つ目のoptionタグに disabled を追加
let todouoption = document.querySelectorAll("#todoufuken option");
for(var i=0;i<todouoption.length;i++){
todouoption[0].disabled = true;
}
});
// optionが変更された時
function onsel(obj){
document.getElementById("target").innerHTML = "<span>" + obj.options[obj.selectedIndex].text + "</span>を選択しました。";
document.getElementById("target").style.display = "block";
}CSSを記述
最後にCSSを記述します。
.todoufukenBox {
position: relative;
}
p#target {
position: absolute;
left: 50%;
transform: translateX(-50%);
background: #313131;
color: #ccc;
margin: 0;
bottom: 130%;
display: none;
width: 300px;
text-align: center;
font-size: 0.8rem;
padding: 7px 0;
border-radius: 9999px;
letter-spacing: 0.06rem;
transition: 0.2s ease-in-out;
}
p#target:after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
border: 8px solid transparent;
border-top: 8px solid #313131;
}
p#target span {
font-weight: 600;
color: #FFF;
}
select#todoufuken {
margin: 0 auto;
background: #FFF;
height: 50px;
text-indent: 10px;
position: relative;
max-width: 340px;
border: solid 1px #707070;
}かかかず
これで完成です。
ざっくりとしたコードの解説
コードは、HTML・JavaScript・CSSの3種類です。順に解説していきます。
HTML
HTMLは、「todoufukenBox」のclass名が付く div タグの親要素に、セレクトボックスを選択後に表示される吹き出しの p タグと、セレクトボックスの select タグです。
<div class="todoufukenBox">
<p id="target"></p>
<select id="todoufuken" onchange="onsel(this);"></select>
</div>JavaScript
JavaScriptは、.addEventListener のロードが終わった際に発動する「load」で、ループを使い47の都道府県を配置します。
配置が完了したら、1つ目の option タグに「disabled」を追加します。
window.addEventListener('load', (event) => { //ロードが完了したら
var inner = [ // 都道府県を作成
{cd:"", label:"都道府県を選択ください。"},
{cd:"1", label:"北海道"},
{cd:"2", label:"青森県"},
{cd:"3", label:"岩手県"},
{cd:"4", label:"宮城県"},
{cd:"5", label:"秋田県"},
{cd:"6", label:"山形県"},
{cd:"7", label:"福島県"},
{cd:"8", label:"茨城県"},
{cd:"9", label:"栃木県"},
{cd:"10", label:"群馬県"},
{cd:"11", label:"埼玉県"},
{cd:"12", label:"千葉県"},
{cd:"13", label:"東京都"},
{cd:"14", label:"神奈川県"},
{cd:"15", label:"新潟県"},
{cd:"16", label:"富山県"},
{cd:"17", label:"石川県"},
{cd:"18", label:"福井県"},
{cd:"19", label:"山梨県"},
{cd:"20", label:"長野県"},
{cd:"21", label:"岐阜県"},
{cd:"22", label:"静岡県"},
{cd:"23", label:"愛知県"},
{cd:"24", label:"三重県"},
{cd:"25", label:"滋賀県"},
{cd:"26", label:"京都府"},
{cd:"27", label:"大阪府"},
{cd:"28", label:"兵庫県"},
{cd:"29", label:"奈良県"},
{cd:"30", label:"和歌山県"},
{cd:"31", label:"鳥取県"},
{cd:"32", label:"島根県"},
{cd:"33", label:"岡山県"},
{cd:"34", label:"広島県"},
{cd:"35", label:"山口県"},
{cd:"36", label:"徳島県"},
{cd:"37", label:"香川県"},
{cd:"38", label:"愛媛県"},
{cd:"39", label:"高知県"},
{cd:"40", label:"福岡県"},
{cd:"41", label:"佐賀県"},
{cd:"42", label:"長崎県"},
{cd:"43", label:"熊本県"},
{cd:"44", label:"大分県"},
{cd:"45", label:"宮崎県"},
{cd:"46", label:"鹿児島県"},
{cd:"47", label:"沖縄県"}
];
// ループで option を生成
for(var i=0;i<inner.length;i++){
let op = document.createElement("option"); //optionタグを生成
op.value = inner[i].cd; // cdを追加
op.text = inner[i].label; // ラベルを追加
document.getElementById("todoufuken").appendChild(op); // optionタグを追加
}
//1つ目のoptionタグに disabled を追加
let todouoption = document.querySelectorAll("#todoufuken option");
for(var i=0;i<todouoption.length;i++){
todouoption[0].disabled = true;
}
});
// optionが変更された時
function onsel(obj){
document.getElementById("target").innerHTML = "<span>" + obj.options[obj.selectedIndex].text + "</span>を選択しました。";
document.getElementById("target").style.display = "block";
}都道府県の設置が完了したら、次にHTMLで設定した onchange のイベントハンドラで設定した関数を登録します。
登録する関数は、.innerHTML でタグと文字列を出力します。
CSS
CSSは、「吹き出し」にあたるHTMLの p タグと、セレクトボックスの select タグの2種を中心とした記述内容です。
.todoufukenBox {
position: relative;
}
p#target {
position: absolute;
left: 50%;
transform: translateX(-50%);
background: #313131;
color: #ccc;
margin: 0;
bottom: 130%;
display: none;
width: 300px;
text-align: center;
font-size: 0.8rem;
padding: 7px 0;
border-radius: 9999px;
letter-spacing: 0.06rem;
transition: 0.2s ease-in-out;
}
p#target:after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
border: 8px solid transparent;
border-top: 8px solid #313131;
}
p#target span {
font-weight: 600;
color: #FFF;
}
select#todoufuken {
margin: 0 auto;
background: #FFF;
height: 50px;
text-indent: 10px;
position: relative;
max-width: 340px;
border: solid 1px #707070;
}さいごに
今回は、HTMLではなくJavaScriptを使ったセレクトボックスでした。
セレクトボックスは、選択肢の表示形式がかず多い選択肢があった場合に有効なUIで、この記事のようにJavaScriptで otpion を出力するとメンテがしやすい場合もあるので、ぜひ参考にしてみてください。
