フォームの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>
0 コメント