地域を選択したらその地域にあるお店の情報をカード状に並べて表示したい

Question

###前提・実現したいこと
Webサイトの地域検索機能についての質問です。

日本全国にある、あるジャンルのお店の情報を、選択した地域のものだけ表示させるようにしたいと考えています。
そこで、HTMLには以下のようなプルダウンを設置しました。

###プルダウンのソースコード

<FORM name="form">
<SELECT NAME="select">
<option SELECTED> ▼ 地域を選択 </option>
<option value="hokkaido">北海道</option>
<option value="aomori">青森県</option>
<option value="iwate">岩手県</option>
・
・
・
</SELECT>
<INPUT type="button" onclick="if(document.form.select.value){location.href=document.form.select.value;}" value="検索">
</FORM>

途中省略しましたが、47都道府県分です。

始め47つの固定ページを作り、そのリンクをvalueに設定することで実現しようと思っていましたが、あまり内容のないコンテンツをたくさん作りたくないので、他の方法を考えています。
※地域分のタグを作り、そのタグページを表示するというものも、同じ理由でNGとします。

そこで次に考えたのが、店舗ごとの情報をカード状にまとめ、id属性をつけて、そのidとプルダウンのvalueがイコールの時だけカードを並べて表示するような処理ができないかと考えました。
カードの例は下のような感じです。

###プルダウンのソースコード

<div class="area-card" id="hokkaido">
<img href="#" />
〇〇 北海道店
住所：△△
電話：[phone]
</div>

表示する場所については、同一ページ内のプルダウンの下がベストですが、難しければ他の専用ページへの表示でも構いません。

プログラミング初心者なのでできるかどうか、またできるとしたらどのような記述が必要なのかがわからず困っています。
PHPでできるのか、javascriptを使わなければできないのかも分かりません。

どなたか分かりやすく教えていただけると幸いです。

###補足情報(言語/FW/ツール等のバージョンなど)
WordPress：バージョン4.9
サーバー：Xserver

Answer 1

抽出条件が地域だけなら、各都道府県ごとにファイルをつくって
jsonデータをいれておき、ajaxで受け取るのがシンプルです
さまざなな検索条件が必要ならやはりRDBの導入を検討下さい

sample

• main.htm

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $('#search').on('click',function(){
    var num=$(this).siblings('[name=pref]').val();
    $('#view').text('');
    if(num!==""){
      $.ajax({
      url:'pref'+num+'.txt',
      dataType:'json',
      }).done(function(data){
        data.map(function(x){
          $('#view').append($('<div><img src="'+x.img+'"><div>'+x.name+'</div><div>'+x.address+'</div><div>'+x.tel+'</div></div>'));
        });
      }).fail(function(xhr,err){
        if(xhr.status==404){
          $('#view').text('ファイルが見つかりません');
        }
        console.log(err);
      });
    }
  });
});
</script>

<form>
<select name="pref">
<option value=""> ▼ 地域を選択 </option>
<option value="01">北海道</option>
<option value="02">青森県</option>
<option value="03">岩手県</option>
</select>
<input type="button" value="検索" id="search">
</form>
<div id="view"></div>

• pref01.txt

main.htmと同じディレクトリに置く

[
{"img":"hokkaido_hoge.htm","name":"〇〇 北海道hoge店","address":"△△","tel":"000-000-0000"},
{"img":"hokkaido_fuga.htm","name":"〇〇 北海道fuga店","address":"△△","tel":"000-000-0000"}
]

Comments

[mokkun0102]

回答ありがとうございます！

すみません、無知なものでjsonもajaxもRDBも聞いたことがありません>_<

プルダウンの選択肢は都道府県のみですが、都道府県ごとのjsonファイル？を作るということでしょうか？

何もわからなくてすみません...。

[yambejp]

簡単なサンプル付けときました、できる範囲で試してみて下さい

[mokkun0102]

すみません、お手数おかけしました！
本当にありがとうございます！

あまりに知識がなさすぎてサンプルいただいても苦戦しています...。

[yambejp]

所定の名称でファイルを2つ作ってWEB上の適当のなディレクトリに置くだけですが
うまくうごきませんか？

[mokkun0102]

WordPressでのmain.htmの場所が分かりませんでした^ ^;

せっかくサンプルまで作ってくださったのに、自分が無知すぎて上手く動作させられず申し訳ありません...。

他の方の回答でなんとか動きそうなので、今回はそっちの方法で試してみようと思います。

ありがとうございました！！

[yambejp]

他の方の回答で解決したようならよかったです
ちなみにmain.htmは自分で書く前提だったのですが
既存のhtmlがあるならそれに追記するだけで動いたはずなんですけどね・・・

[mokkun0102]

なるほどです！
ただ聞いた話なので詳細はわかりませんが、WordPressはページのリクエストを受けた時に、データベースに格納されたデータをPHPにて組み立てることで、ページを表示しているそうです。
なので、htmlファイル自体が存在しないとかなんとか...。
間違っていたらすみません^ ^;

htmlファイルがあれば上の内容で動くんですね！
勉強になります>_<

Answer 2

県ごとのページを作りたくないということですと、wordpressの枠内でやるなら一つのページに書くしかないですよね。
全部のカードをHTMLにベタ書きし、javascriptで制御する、というのはいかがですか。

サンプル

document.getElementById('search').addEventListener('click',function(e){
  const pref = document.getElementById('pref').value;
  document.querySelectorAll( `.area-card.show` ).forEach( e => e.classList.remove('show') );
  document.querySelectorAll( `.${pref}` ).forEach( e => e.classList.add('show') );
});

Comments

[mokkun0102]

回答ありがとうございます！
Lhankor_Mhyさんのやり方を試してみたところ、上手く動作しました！

とりあえずこれでやっていってまた壁にぶつかったら質問させてください！！
助かりました^ ^