都道府県選択したら連動して市区郡のチェックボックスが出るアレ作ってみた

都道府県選択したら連動して市区郡が出てくるアレ作ってみた

↑のチェックボックス版。

アレの動作
↑こんな感じで動きます。

全部書いてると長くなるのでスパッと書きます。
JSONの準備とか前準備は上の記事見て下さい。
この記事だけじゃ、動かないです。

デザイン苦手だけど参考程度のcss

div#s2 {
    width: 640px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
input[type="checkbox"] {
    display: none;
}
div.check-group label {
    cursor: pointer;
    padding: 5px 10px;
    float: left;
    border: solid 1px #aaa;
    margin: 4px;
    background: #eee;
    width: 128px;
    text-align: center;
}
div.check-group input:checked+label {
    color: #666;
    background: #99ff99;
}

アレの変更、コピペでいいです。

<script>
/* 市区郡一覧のチェックボックスをリセットする関数 */
function cleardivbox() {
    $('#s2').empty();
}

/* 市区郡一覧のチェックボックスを表示するアレ */
$(function(){
        $('#s1').change((function(){
            cleardivbox();
            $.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('<input id="' + Pref[0][`${selectPref}`].city[i].citycode
                            + '" name="s3[]" type="checkbox" value="'
                            + Pref[0][`${selectPref}`].city[i].citycode + '">'
                            + '<label for="' + Pref[0][`${selectPref}`].city[i].citycode + '">'
                            + Pref[0][`${selectPref}`].city[i].city + '</label>');
                        }
                    })
                },
                error:function(){
                    alert("市区郡の取得に失敗しました");
                }
            });
        }));
    });
</script>

JSONファイルにあるcitycodeがvalueになっていますので市区郡の文字列を取得したい場合はcitycodeのcodeを取って頂ければ渋谷区とか市区郡の文字列で取得できます。

表示領域

<div class="check-group">
    <div name="s2" id="s2"></div>
</div>

パーツでコードを載せてるのでもしかしたら動かないとかデザインがおかしいとかあると思いますが動いてるコードを載せてるのでおかしければデザインは自力でなんとかして下さいｗ

ちなみに市区郡一覧で一番長い文字列は「さいたま市」にある3文字の区で8文字が最長です。
「さいたま市大宮区」とかですね。