コンボボックスを連動させる。

先週から取り組んでいるAPIを利用した検索サービスを構築しようと取り組んだのですがいろいろ躓きました。とりあえず躓いたところを忘れないうちに備忘録として残しておこうと思います。しばらくこのサービスを構築するで知ったことを備忘録にまとめることになりそうです。

ドコイク？APIを利用して、特定のお店の情報を検索する仕組みを実装するためコンボボックスから検索キーワードを選択してもらい、そのキーワードを元にリクエストを送りレスポンスを表示させることを思いつきました。

が、まずはこのコンボボックスの制御に躓きました。コンボボックスは3つあり、それぞれを連動させる必要がありました。

「コンボボックス1」でエリアを指定したらそれに紐づいた県名を「コンボボックス2」に設定、さらにコンボボックスで県を指定したら「コンボボックス3」に市区町村名を設定するといった具合です。
具体的には「コンボボックス1」で【甲信越】を選んだら「コンボボックス2」に【新潟県】【長野県】【山梨県】から選択できるようになり、【長野県】を選んだら長野県内の市区町村を「コンボボックス3」から選択できるようにしたかったのです。

これはjQueryの「jquery.dependent.js」を利用することで解決できました。 親ID「area」に対して子ID「ken」。子ID「ken」に対して孫ID「geo」が紐づいています。

<script type="text/javascript" src="./js/jquery.dependent.js"></script>
    
      <script type="text/javascript">
      
      $(document).ready(function(){
      
        $('#id').dependent({
      
         parent:'area',//親のid名
      
         group: 'selectable'
      
        });
      
      });
      
      
      $(document).ready(function(){
      
        $('#ken').dependent({ parent:'area', group: 'selectable' });
      
        $('#geo').dependent({ parent:'ken', group: 'selectable' });
      
      });
    
    

コンボボックスの設定。

<form action = "" method = "POST" >
    
      <select name="area" id="area" class="selectable">
      
      <option value="">-- select --</option>
      <option value="01" title="ARE01">北海道</option>
      <option value="02" title="ARE02">東北</option>
      ・
      ・
      ・
      <option value="10" title="ARE10">沖縄</option>
      
      </select>
      
      
      <select name="ken" id="ken" class="selectable">
      
      <option value="">-- select --</option>
      <option value="北海道" class="ARE01" title="KEN01">北海道</option>
      <option value="青森県" class="ARE02" title="KEN02">青森県</option>
      ・
      ・
      ・
      <option value="沖縄県" class="ARE10" title="KEN47">沖縄県</option>
      
      </select>
      
      <select name="geo" id="geo" class="selectable">
      
      <option value="">-- select --</option>
      <option class="KEN01" value="札幌市中央区">札幌市中央区</option>
      <option class="KEN01" value="札幌市北区">札幌市北区</option>
      ・
      ・
      ・
      <option class="KEN47" value="八重山郡与那国町">八重山郡与那国町</option>
      
      </select>
      
      <input type="submit" name="GET送信" value="GET送信">
      
      </form>


  

これでエリアと県名と市区町村名が連動して動くようになりました。ただ、このままだと記述が多くてサイトが重くなるので、コンボボックスの値は別ファイルから読み込めるようにするとか工夫が必要ですね。このあたりは別途調査したいと思います。