<html lang="ja">
<meta charset="utf-8">
<meta name="viewport"content="width=device-width,initial-scale=1.0">
<title>郵便番号を探す</title>
<link rel="icon"type="image/png"href="favicon.png">
<style>
*:focus{outline:none;}
body{font-family:Arial,sans-serif;
background-color:#f9f9f9;}
h1{font-size:1em;}
.めにゅー{position:relative;
display:inline-block;}
input{width:200px;
padding:8px;
font-size:1em;}
.どろっぷだうん{position:absolute;
top:100%;
left:0;
width:80%;
max-height:1000px;
overflow-y:auto;
border:1px solid #123456;
background:white;
display:none;
z-index:1000;}
.どろっぷだうん div{padding:8px;
cursor:pointer;
color:green;}
.どろっぷだうん div:hover{background-color:#f0f0f0;
color:black;}
</style>

<h1>郵便番号検索</h1>
<label for="都道府県">都道府県:</label>
<select id="都道府県" onchange="選択_ちゅーず()">
<option value="">選んでください</option>
<option value="埼玉県">埼玉県</option>
<option value="千葉県">千葉県</option>
<option value="東京都">東京都</option>
<option value="神奈川県">神奈川県</option>
</select>
<label for="市区町村">市区町村:</label>
<select id="市区町村"onchange="選択_えりあ()"disabled>
<option value="">選んでください</option>
</select>
<label for="地域">地域:</label>
<select id="地域"onchange="番号_表示()"disabled>
<option value="">選んでください</option>
</select>
<p id="結果"></p>

<script>
const でーた={"東京都":{"千代田区":
{"一番町":"102-0082",
"岩本町":"101-0032",
"内神田":"101-0047",
"内幸町":"100-0011",
"鍛冶町":"101-0044"},
"中央区":{"銀座":"104-0061",
"築地":"104-0045"},
"港区":{"芝公園":"105-0011",
"赤坂":"107-0052"},
"新宿区":{"高田馬場":"169-0075",
"西新宿":"160-0023"}}};
function 選択_ちゅーず()
{const 都道府県=document.getElementById("都道府県").value;
const 市区町村_を選択=document.getElementById("市区町村");
const 地域_を選択=document.getElementById("地域");
const 結果=document.getElementById("結果");
市区町村_を選択.innerHTML='<option value="">選んでください</option>';
地域_を選択.innerHTML='<option value="">選んでください</option>';
結果.innerHTML='';
if(都道府県 && でーた[都道府県])
{const 選択_都道府県=Object.keys(でーた[都道府県]);
選択_都道府県.forEach(city=>
{const 選択_追加=document.createElement("option");
選択_追加.value=city;
選択_追加.textContent=city;
市区町村_を選択.appendChild(選択_追加);});
市区町村_を選択.disabled=false;}
else
{市区町村_を選択.disabled=true;}}
function 選択_えりあ()
{const 都道府県=document.getElementById("都道府県").value;
const 市区町村=document.getElementById("市区町村").value;
const 地域_を選択=document.getElementById("地域");
const 結果=document.getElementById("結果");
地域_を選択.innerHTML='<option value="">選んでください</option>';
結果.innerHTML='';
if(都道府県 && 市区町村 && でーた[都道府県][市区町村])
{const 選択_おぷしょん=Object.keys(でーた[都道府県][市区町村]);
選択_おぷしょん.forEach(地域_情報=>
{const 選択_追加=document.createElement("option");
選択_追加.value=地域_情報;
選択_追加.textContent=地域_情報;
地域_を選択.appendChild(選択_追加);});
地域_を選択.disabled=false;}
else
{地域_を選択.disabled=true;}}
function 番号_表示()
{const 都道府県=document.getElementById("都道府県").value;
const 市区町村=document.getElementById("市区町村").value;
const 地域=document.getElementById("地域").value;
const 結果=document.getElementById("結果");
if(都道府県&&市区町村&&地域&&でーた[都道府県][市区町村][地域])
{const ゆうびんばんごう=でーた[都道府県][市区町村][地域];
結果.innerHTML=`〒${ゆうびんばんごう}<br>${都道府県} ${市区町村}${地域}`;}
else
{結果.innerHTML='郵便番号が見つかりませんでした.';}}
</script>

</html>