【jQuery】セレクトボックスで非表示を切り替える方法

Question

セレクトボックスで表示・非表示を切り替えたいです。

ほぼほぼカタチにはなったのですが
うまく動かない箇所があり投稿させていただきます。

参考）https://macoblog.com/select_show_and_hide/
こちらのサイトを参考に作成しております。

<!-- 表示・非表示が切り替える要素 -->
<ul>
  <li class="area">北海道</li>
  <li class="area">東京</li>
  <li class="area">大阪</li>
  <li class="area">兵庫</li>
  <li class="area">京都</li>
</ul>

<!-- 絞り込むためのトリガー -->
<select class="select">
  <option>全て</option>
  <option>北海道</option>
  <option>東京</option>
  <option>大阪</option>
  <option>兵庫</option>
  <option>京都</option>
</select>

.hide {
  /* 表示の切り替えに使用する */
  display: none;
}

$('.select').on('change', function(){
  // テキストを取得(例：北海道)
  var area = $(this).children(':selected').text();

  $('.area').each(function(){
    // 全て非表示にする(初期化)
    $(this).addClass('hide');

    // '全て'が選択されていれば
    if(area == '全て'){
      // 表示する
      $(this).removeClass('hide');

    // テキスト(例：北海道)が一致していれば
    }else if($(this).html().match(area)){
      // 表示する
      $(this).removeClass('hide');
    }
  });
});

上記で例えば一度「北海道」を選択し、「すべて」を選択すると
何も表示されない状態になります。

どうすればすべて表示されるようになりますでしょうか？

ご教授下さい。よろしくお願いいたします。

Jsを別ファイルで読み込む場合ってこれで大丈夫でしょうか？

  // テキストを取得(例：北海道)
  var area = $(this).children(':selected').text();

  $('.area').each(function(){
    // 全て非表示にする(初期化)
    $(this).addClass('hide');

    // '全て'が選択されていれば
    if(area == '全て'){
      // 表示する
      $(this).removeClass('hide');

    // テキスト(例：北海道)が一致していれば
    }else if($(this).html().match(area)){
      // 表示する
      $(this).removeClass('hide');
    }
  });
});

Comments

[hatena19]

提示のコードで問題なく動作してますが。
提示以外の部分のコードに問題があるのでは。
症状が再現できるコードの提示をお願いします。

[退会済みユーザー]

タグは上記のままなのですがなんでだ！？（＞＜）

＞＞症状が再現できるコード　少々おまちくださいませ。

[hatena19]

動作確認したサンプルです。
https://codepen.io/hatena19/pen/abmmPap

[退会済みユーザー]

わざわざありがとうございます。色々触っていて気付いたのですが
JSを別ファイルで読み込むとうまく出ません。あとjqueryをhead内に書くとうまくいかないです。
＜/body＞直前に書くと動くのですがこれってなにか原因があるのでしょうか。

[hatena19]

HTML読み込み完了前に実行されているのでしょう。
下記を参考に下ください。
https://qiita.com/AkihikoIkeda/items/9dda2dda70b77c8eeca4

Answer 1

こんばんは。
すでに別の方が書かれている通り、このサンプルは正常に動作します。
外部ファイルでJavaScriptのファイルを読み込む場合ですが、基本的にjQueryなどのライブラリはhead内で読み込みます。逆に$などを利用したコードは、外部、内部にかかわらずbodyの一番最後に書くのが間違いないと思います。

これは、ブラウザはページを一回で全部読み込むのではなく、上から順に少しずつ読み込むためです。例えば各都道府県のli要素やoption要素の宣言よりも前に$を用いたコードを記述してしまうと、各都道府県のli要素やoption要素がまだ読み込まれていない（ブラウザからするとまだない）のにイベントの設定をしようとします（その結果イベントは設定されません。）
なので、htmlに記述した要素に対するコードを記述するときは</body>の手前に記述するのが無難でしょう。
あるいは、次のいずれかの方法を使えばhead内でも記述することができます。

//方法①
window.addEventListener('load',function(){
    //コード
});
//方法②
$(document).ready(function(){
    //コード
});

これは、最後までページの読み込みが終わってから//コードに書いた内容を実行することを予約するようなコードとなっています。
※この場合でもjQueryなどのライブラリの読み込みはhead内の、かつ自分で記述するコードより前に読み込むのがお作法ですってどこかに書いてあるのを見た気がします。

参考になれば幸いです。