スマホでjQueryが動かない

フォームのselectで地域を選ぶと町名のドロップダウンリストが絞り込まれるというものが作りたいです。
こちらのサイトを参考に作りました。
https://web-camp.io/magazine/archives/85111

PCでは正常に動きますが、スマホだと絞り込みができません。
スクリプトの位置を変えてみたりなどしましたが初心者のためよくわかりません。。
どなたかご教授いただけると幸いです。
よろしくお願いいたします。

該当のソースコード


<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>地域絞り込み</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
<select id="prefecture">
  <option value="">選択してください
  <option value="tokyo">東京都
  <option value="osaka">大阪府
  <option value="kyoto">京都府
  <option value="aichi">愛知県
</select>
<select id="city">
  <option value="">選択してください</option>
  <option value="世田谷区" data-val="tokyo">世田谷区</option>
  <option value="練馬区" data-val="tokyo">練馬区</option>
  <option value="太田区" data-val="tokyo">太田区</option>
  <option value="足立区" data-val="tokyo">足立区</option>
  <option value="江戸川区" data-val="tokyo">江戸川区</option>
  <option value="大阪市" data-val="osaka">大阪市</option>
  <option value="堺市" data-val="osaka">堺市</option>
  <option value="東大阪市" data-val="osaka">東大阪市</option>
  <option value="枚方市" data-val="osaka">枚方市</option>
  <option value="豊中市" data-val="osaka">豊中市</option>
  <option value="京都市" data-val="kyoto">京都市</option>
  <option value="宇治市" data-val="kyoto">宇治市</option>
  <option value="亀岡市" data-val="kyoto">亀岡市</option>
  <option value="舞鶴市" data-val="kyoto">舞鶴市</option>
  <option value="城陽市" data-val="kyoto">城陽市</option>
  <option value="名古屋市" data-val="aichi">名古屋市</option>
  <option value="豊田市" data-val="aichi">豊田市</option>
  <option value="一宮市" data-val="aichi">一宮市</option>
  <option value="豊橋市" data-val="aichi">豊橋市</option>
  <option value="岡崎市" data-val="aichi">岡崎市</option>
</select>


<script>
var $city = $('select[id="city"]');
$('select[id="prefecture"]').change(function() {
  var val1 = $(this).val();  
  $city.find('option').each(function() {
    var val2 = $(this).data('val');
    if (val1 === val2) {
      $(this).show();
    }else {
      $(this).hide();
    }
  })
})
</script>
</body>
</html>

行動規範の内容に同意します

回答1件

ベストアンサー

「optionを非表示にする」手法ではなく、逆の「optionを生成する」手法でしてみるのはいかがでしょうか？
iPhoneで確認しましたが正常に実行されました。

動作確認用サンプル：https://jsfiddle.net/5vpyuknt/3/

html
1<select id="prefecture">
2  <option value="">選択してください</option>
3  <option value="tokyo">東京都</option>
4  <option value="osaka">大阪府</option>
5  <option value="kyoto">京都府</option>
6  <option value="aichi">愛知県</option>
7</select>
8
9<select id="city">
10  <option value="">選択してください</option>
11</select>

javascript
1
2// 市・区を全部コピペするの面倒で省略しましたごめんなさい
3const prefectureMap = {
4  tokyo: ['世田谷区', '練馬区', '太田区'],
5  osaka: ['大阪市', '堺市'],
6  kyoto: ['京都市'],
7  aichi: ['名古屋市']
8};
9
10// 都道府県のセレクトボックスが変更されたら、setCities()関数を実行する
11$('#prefecture').on('change', setCities);
12
13// 対応する市・区のoptionを生成する関数
14function setCities() {
15  // 都道府県を取得
16  const prefectureVal = $(this).val();
17  
18  // 都道府県と対応する市・区の配列を取得
19  const cities = prefectureMap[prefectureVal];
20  
21  // いったん市のセレクトボックスの中身を全て削除→「選択してください」optionを生成
22  $('#city').empty().append(`<option value="">選択してください</option>`);
23  
24  // 都道府県と対応する市・区のoptionを生成
25  for (const c of cities) {
26  	$('#city').append(`<option value="${c}">${c}</option>`);
27  }
28}