技術ブログ

今回は例として、こんな2つのセレクトボックスを作成しました。

①「地方選択」セレクトボックスと「都道府県選択」セレクトボックスがある
②「地方選択」セレクトボックスで任意の地方を選択すると、
選択した地方に対応した都道府県が「都道府県選択」セレクトボックスに設定される

↓こんな感じです。

  
    <script>
    // 各地域ごとの都道府県の配列を設定
    var hokkaido = {1:'北海道'};
    var tohoku = {2:'青森県', 3:'岩手県', 4:'宮城県', 5:'秋田県', 6:'山形県', 7:'福島県'};
    var kanto = {8:'茨城県', 9:'栃木県', 10:'群馬県', 11:'埼玉県', 12:'千葉県', 13:'東京都', 14:'神奈川県'};
    var chubu = {15:'新潟県', 16:'富山県', 17:'石川県', 18:'福井県', 19:'山梨県', 20:'長野県', 21:'岐阜県', 22:'静岡県', 23:'愛知県'};
    var kinki = {24:'三重県', 25:'滋賀県', 26:'京都府', 27:'大阪府', 28:'兵庫県', 29:'奈良県', 30:'和歌山県'};
    var chugoku = {31:'鳥取県', 32:'島根県', 33:'岡山県', 34:'広島県', 35:'山口県'};
    var shikoku = {36:'徳島県', 37:'香川県', 38:'愛媛県', 39:'高知県'};
    var kyushu = {40:'福岡県', 41:'佐賀県', 42:'長崎県', 43:'熊本県', 44:'大分県', 45:'宮崎県', 46:'鹿児島県', 47:'沖縄県'};
    // 各地域を配列にまとめる
    var areaArray = [hokkaido, tohoku, kanto, chubu, kinki, chugoku, shikoku, kyushu];

    $(function() {
      // 地域選択用セレクトボックスが切り替わったら発動
      $('#areaSelect').change(function() {
        // 一旦、都道府県選択用セレクトボックスのoptionを消去
        $('#pref > option').remove();
        //　地域選択用セレクトボックスの値を取得
        var val = $(this).val();
        // 選択したvalue値を変数に格納
        var selectedArea = areaArray[val];
        // 選択した地域の都道府県をセレクトボックスのoptionに追加
        $.each(selectedArea, function(index, value){
          $('#pref').append($('<option>').html(value).val(index));
        })
      });
    });
    </script>

  <select class="areaSelect" id="areaSelect">
    <option>地域を選択してください</option>
    <option value="0">北海道</option>
    <option value="1">東北</option>
    <option value="2">関東</option>
    <option value="3">中部</option>
    <option value="4">近畿</option>
    <option value="5">中国</option>
    <option value="6">四国</option>
    <option value="7">九州</option>
  </select>

  <select class="pref" id="pref">
  </select>
  

↓同様の実装をされている方がいました。
こんな方法もあるようです。