WebDesignのヨリドコロ

ページ内目次

セレクトボックスの選択値によって表示するフォームフィールドを変える – 例えば地域エリアと都道府県のように…

 

ざっくり言って、↑　こんな感じのものです。

地域エリアフィールドで北海道東北を選ぶと、都道府県フィールドのリストが北海道東北の都道府県になり、関東を選ぶと関東の都道府県になり…　ってものです。

仕組みとしては、もともと北海道東北以外の都道府県フィールドは、display:none で非表示にしてあり、地域エリアフィールドの値が変更されると、該当する都道府県フィールドを display:block にするというスクリプトを呼び出しています。

スクリプトは、こんな感じ。これを<head>内に埋め込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
  $('#sform select[name="area"]').change(function() {
    if ($('select[name="area"] option:selected').val() == '0') $('#prefectures0Box').css('display','block');
    else $('#prefectures0Box').css('display','none');
    if ($('select[name="area"] option:selected').val() == '1') $('#prefectures1Box').css('display','block');
    else $('#prefectures1Box').css('display','none');
    if ($('select[name="area"] option:selected').val() == '2') $('#prefectures2Box').css('display','block');
    else $('#prefectures2Box').css('display','none');
    if ($('select[name="area"] option:selected').val() == '3') $('#prefectures3Box').css('display','block');
    else $('#prefectures3Box').css('display','none');
    if ($('select[name="area"] option:selected').val() == '4') $('#prefectures4Box').css('display','block');
    else $('#prefectures4Box').css('display','none');
    if ($('select[name="area"] option:selected').val() == '5') $('#prefectures5Box').css('display','block');
    else $('#prefectures5Box').css('display','none');
    if ($('select[name="area"] option:selected').val() == '6') $('#prefectures6Box').css('display','block');
    else $('#prefectures6Box').css('display','none');
  });
});
</script>

HTMLはこんな感じ

<div id="sform" class="row">
  <div class="col-sm-6">
    <label for="area">地域エリア</label>
    <select id="area" class="" name="area">
      <option value="0" selected>選択する</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>
    </select>
  </div>
  <div class="col-sm-6">
    <div id="prefectures0Box">
      <label for="prefectures0">都道府県</label>
      <select id="prefectures0" class="" name="prefectures0">
        <option value="0">選択する</option>
        <option value="11">北海道</option>
        <option value="12">青森県</option>
        <option value="13">岩手県</option>
        <option value="14">宮城県</option>
        <option value="15">秋田県</option>
        <option value="16">山形県</option>
        <option value="17">福島県</option>
        <option value="21">茨城県</option>
        <option value="22">栃木県</option>
        <option value="23">群馬県</option>
        <option value="24">埼玉県</option>
        <option value="25">千葉県</option>
        <option value="26">東京都</option>
        <option value="27">神奈川県</option>
        <option value="31">新潟県</option>
        <option value="32">富山県</option>
        <option value="33">石川県</option>
        <option value="34">福井県</option>
        <option value="35">山梨県</option>
        <option value="36">長野県</option>
        <option value="37">岐阜県</option>
        <option value="38">静岡県</option>
        <option value="39">愛知県</option>
        <option value="41">大阪府</option>
        <option value="42">京都府</option>
        <option value="43">兵庫県</option>
        <option value="44">奈良県</option>
        <option value="45">三重県</option>
        <option value="46">滋賀県</option>
        <option value="47">和歌山県</option>
        <option value="51">鳥取</option>
        <option value="52">島根</option>
        <option value="53">岡山</option>
        <option value="54">広島</option>
        <option value="55">山口</option>
        <option value="56">香川</option>
        <option value="57">愛媛</option>
        <option value="58">徳島</option>
        <option value="59">高知</option>
        <option value="61">福岡</option>
        <option value="62">佐賀</option>
        <option value="63">長崎</option>
        <option value="64">熊本</option>
        <option value="65">大分</option>
        <option value="66">宮崎</option>
        <option value="67">鹿児島</option>
        <option value="68">沖縄</option>
      </select>
    </div>
    <div id="prefectures1Box" style="display:none">
      <label for="prefectures1">都道府県</label>
      <select id="prefectures1" class="" name="prefectures1">
        <option value="0">選択する</option>
        <option value="11">北海道</option>
        <option value="12">青森県</option>
        <option value="13">岩手県</option>
        <option value="14">宮城県</option>
        <option value="15">秋田県</option>
        <option value="16">山形県</option>
        <option value="17">福島県</option>
      </select>
    </div>
    <div id="prefectures2Box" style="display:none">
      <label for="prefectures2">都道府県</label>
      <select id="prefectures2" class="" name="prefectures2">
        <option value="0">以下から選択</option>
        <option value="21">茨城県</option>
        <option value="22">栃木県</option>
        <option value="23">群馬県</option>
        <option value="24">埼玉県</option>
        <option value="25">千葉県</option>
        <option value="26">東京都</option>
        <option value="27">神奈川県</option>
      </select>
    </div>
    <div id="prefectures3Box" style="display:none">
      <label for="prefectures3">都道府県</label>
      <select id="prefectures3" class="" name="prefectures3">
        <option value="0">選択する</option>
        <option value="31">新潟県</option>
        <option value="32">富山県</option>
        <option value="33">石川県</option>
        <option value="34">福井県</option>
        <option value="35">山梨県</option>
        <option value="36">長野県</option>
        <option value="37">岐阜県</option>
        <option value="38">静岡県</option>
        <option value="39">愛知県</option>
      </select>
    </div>
    <div id="prefectures4Box" style="display:none">
      <label for="prefectures4">都道府県</label>
      <select id="prefectures4" class="" name="prefectures4">
        <option value="0">選択する</option>
        <option value="41">大阪府</option>
        <option value="42">京都府</option>
        <option value="43">兵庫県</option>
        <option value="44">奈良県</option>
        <option value="45">三重県</option>
        <option value="46">滋賀県</option>
        <option value="47">和歌山県</option>
      </select>
    </div>
    <div id="prefectures5Box" style="display:none">
      <label for="prefectures5">都道府県</label>
      <select id="prefectures5" class="" name="prefectures5">
        <option value="0">選択する</option>
        <option value="51">鳥取</option>
        <option value="52">島根</option>
        <option value="53">岡山</option>
        <option value="54">広島</option>
        <option value="55">山口</option>
        <option value="56">香川</option>
        <option value="57">愛媛</option>
        <option value="58">徳島</option>
        <option value="59">高知</option>
      </select>
    </div>
    <div id="prefectures6Box" style="display:none">
      <label for="prefectures6">都道府県</label>
      <select id="prefectures6" class="" name="prefectures6">
        <option value="0">選択する</option>
        <option value="61">福岡</option>
        <option value="62">佐賀</option>
        <option value="63">長崎</option>
        <option value="64">熊本</option>
        <option value="65">大分</option>
        <option value="66">宮崎</option>
        <option value="67">鹿児島</option>
        <option value="68">沖縄</option>
      </select>
    </div>
  </div>
</div>

 

私は、高速化が期待できるのと、楽チンだからという理由で、jquery を読み込むには、Google から提供されているライブラリを、CDN（Content Delivery Network）を利用して読み込んでいます。

Googleから提供されているCDNライブラリの最新バージョンや読み込み方の確認は ↓ コチラ

Hosted Libraries | Hosted Libraries | Google Developers

↑上へまいりま〜す