質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

スマホでjQueryが動かない

Cabe
Cabe

総合スコア24

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1回答

1グッド

0クリップ

242閲覧

投稿2022/11/18 09:47

編集2022/11/18 09:49

フォームの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>
Cocode👏を押しています

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

2

ベストアンサー

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

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}

投稿2022/11/18 10:42

編集2022/11/18 10:43
Cocode

総合スコア2238

spoofy_dragon, Cabe😄を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

Cabe

2022/11/18 14:41

ありがとうございます!! スマホでも無事動作しました!!!!
Cabe

2022/11/18 15:35

追加で一点質問です。 こちらの選択した町名に数値を当てはめることはできるのでしょうか?? そのほかにも選択項目があり、それらを足したり、かけたりする計算式を作りたいと思っています。
Cocode

2022/11/18 16:36

具体的なことがわかりませんので確約はできませんが、できると思います。 本投稿のご質問内容は解決しており、それとは別の質問になると思うので、具体的な内容を記した新しい質問を投稿していただければ幸いです🙇‍♀️ わかることでしたらまた回答を投稿させていただきます!
Cabe

2022/11/23 07:30

ありがとうございます!!!

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。