チェックボックス版
都道府県選択したら連動して市区郡のチェックボックスが出るアレ作ってみた
アレの動作
↑こんな感じで動きます。
##まずJSONデータの準備
ここから都道府県のJSONデータをコピペしてphpファイルと同じフォルダ内にjsonフォルダを作ってpref.jsonという名前で保存して下さい。
###マークダウンで区切ってますがphpファイルで繋げて下さい
pref_city.php
<?php
/* 都道府県一覧はJSONデータでやってもいいですよ
* その場合は
* $.getJSON('pref.json', function(Pref)){
* for(i = 1; i < 48; i++){
* var j = ('00' + i ).slice( -2 );
* $('#s1').append('<option value=" + j + '">' + Pref[0][j].name + '</option>');
* }
* 上記で動くと思います。検証してないので間違ってたらご指摘下さい
*/
//都道府県の配列
$areas [0] ="都道府県を選択";
$areas [1] ="北海道";
$areas [2] ="青森県";
$areas [3] ="岩手県";
$areas [4] ="宮城県";
$areas [5] ="秋田県";
$areas [6] ="山形県";
$areas [7] ="福島県";
$areas [8] ="茨城県";
$areas [9] ="栃木県";
$areas [10] ="群馬県";
$areas [11] ="埼玉県";
$areas [12] ="千葉県";
$areas [13] ="東京都";
$areas [14] ="神奈川県";
$areas [15] ="新潟県";
$areas [16] ="富山県";
$areas [17] ="石川県";
$areas [18] ="福井県";
$areas [19] ="山梨県";
$areas [20] ="長野県";
$areas [21] ="岐阜県";
$areas [22] ="静岡県";
$areas [23] ="愛知県";
$areas [24] ="三重県";
$areas [25] ="滋賀県";
$areas [26] ="京都府";
$areas [27] ="大阪府";
$areas [28] ="兵庫県";
$areas [29] ="奈良県";
$areas [30] ="和歌山県";
$areas [31] ="鳥取県";
$areas [32] ="島根県";
$areas [33] ="岡山県";
$areas [34] ="広島県";
$areas [35] ="山口県";
$areas [36] ="徳島県";
$areas [37] ="香川県";
$areas [38] ="愛媛県";
$areas [39] ="高知県";
$areas [40] ="福岡県";
$areas [41] ="佐賀県";
$areas [42] ="長崎県";
$areas [43] ="熊本県";
$areas [44] ="大分県";
$areas [45] ="宮崎県";
$areas [46] ="鹿児島県";
$areas [47] ="沖縄県";
?>
ヘッダー部分：上のphpファイルの続きと思って下さい
<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset = "utf-8">
<title>都道府県選ぶと市区郡出てくるアレ</title>
<!-- JQueryの置き場所は自由に。コピペならphpファイルと同じ場所へjsフォルダ作ってその中に -->
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
// 市区郡一覧のドロップダウンメニューをリセットする関数
function clearList2() {
obj=document.forms[0];
for (i=obj.s2.options.length;i>=1; i--) {
obj.s2.options[i] = null;
}
}
/* Ajax使って都道府県が選択されたら該当する都道府県の市区郡一覧を
* 2番目のドロップダウンメニューを書き換えるアレ
*/
$(function(){
$('#s1').change((function(){
clearList2();
$.ajax({
type: 'POST',
url: 'json/pref.json',
dataType: 'json',
success:function(){
var selectPref = ('00' + $('#s1 option:selected').val()).slice( -2 );
$.getJSON("json/pref.json", function(Pref){
for(var i = 0; i < Pref[0][`${selectPref}`].city.length; i++){
$('#s2').append('<option value="' + Pref[0][`${selectPref}`].city[i].city + '">' + Pref[0][`${selectPref}`].city[i].city + '</option>');
}
})
},
error:function(){
alert("市区郡の取得に失敗しました");
}
});
}));
});
</script>
</head>
<body>
<form method="post" action="送信先のファイル">
<div>
<p>都道府県を選択：<select name="s1" id="s1">
上の続き：冒頭のphpで宣言してる都道府県の配列をループさせて表示
<?php
foreach($areas as $i => $area){
?>
<option value="<?php echo $i;?>"><?php echo $area; ?></option>
<?php } ?>
上の続き：HTMLのフッター部分
</select>
</div>
<div>
市区郡を選択：
<select name="s2" id="s2">
<option value="">市区郡を選択</option>
</select>
</div>
</form>
</body>
</html>
区切ってる部分を全て繋いで貰ってphpファイルとして保存して頂ければ動くと思います。
動かなかったらご指摘頂ければ幸いです。
#おまけ
都道府県をPOSTした先のファイルで処理して貰えれば数値ではなくて都道府県名が**$pref**に入ります。上のコピペで特に処理してなければ都道府県に対応する数値でPOSTします。
switch文による都道府県名取得
$pref_no = $_POST['s1'];
switch($pref_no){
case 1: $pref = '北海道'; break;
case 2: $pref = '青森県'; break;
case 3: $pref = '岩手県'; break;
case 4: $pref = '宮城県'; break;
case 5: $pref = '秋田県'; break;
case 6: $pref = '山形県'; break;
case 7: $pref = '福島県'; break;
case 8: $pref = '茨城県'; break;
case 9: $pref = '栃木県'; break;
case 10: $pref = '群馬県'; break;
case 11: $pref = '埼玉県'; break;
case 12: $pref = '千葉県'; break;
case 13: $pref = '東京都'; break;
case 14: $pref = '神奈川県'; break;
case 15: $pref = '新潟県'; break;
case 16: $pref = '富山県'; break;
case 17: $pref = '石川県'; break;
case 18: $pref = '福井県'; break;
case 19: $pref = '山梨県'; break;
case 20: $pref = '長野県'; break;
case 21: $pref = '岐阜県'; break;
case 22: $pref = '静岡県'; break;
case 23: $pref = '愛知県'; break;
case 24: $pref = '三重県'; break;
case 25: $pref = '滋賀県'; break;
case 26: $pref = '京都府'; break;
case 27: $pref = '大阪府'; break;
case 28: $pref = '兵庫県'; break;
case 29: $pref = '奈良県'; break;
case 30: $pref = '和歌山県'; break;
case 31: $pref = '鳥取県'; break;
case 32: $pref = '島根県'; break;
case 33: $pref = '岡山県'; break;
case 34: $pref = '広島県'; break;
case 35: $pref = '山口県'; break;
case 36: $pref = '徳島県'; break;
case 37: $pref = '香川県'; break;
case 38: $pref = '愛媛県'; break;
case 39: $pref = '高知県'; break;
case 40: $pref = '福岡県'; break;
case 41: $pref = '佐賀県'; break;
case 42: $pref = '長崎県'; break;
case 43: $pref = '熊本県'; break;
case 44: $pref = '大分県'; break;
case 45: $pref = '宮崎県'; break;
case 46: $pref = '鹿児島県'; break;
case 47: $pref = '沖縄県'; break;
default : $err_msg = '都道府県の値が不正です';
}
こっそり直しました…