iPhone プルダウンメニューの選択肢 UI 変更について

Question

お世話になります。
スワロースポーツ岡本と申します。

現在、最新のiPhoneでの選択肢(プルダウンメニュー)の表示ですが、
添付画像のような表示をしています。
(現在_選択肢.jpg)

今回、選択肢(プルダウンメニュー)の中身の表示を調整したいのですが、
現状の記述(HTML)は変更せず、見た目の部分を変更させたいです。
イメージは、添付画像の通り(選択肢_イメージ.jpg)

CSS、javascript等で選択肢の部分を調整することは可能でしょうか。
もし、ご存知でしたら、ご教示いただけると幸いです。

以上、よろしくお願いします。###HR######IMG08f887fb984acfe0c9dff3ea600fdb26a.jpegIMG0### ###IMG1da1fd2bb293e907a3579d55901767ed4.jpegIMG1###

Answer

ECマスターズの北原です。

>CSS、javascript等で選択肢の部分を調整することは可能でしょうか。
>もし、ご存知でしたら、ご教示いただけると幸いです。

ご参考の記事で紹介されてるスクリーンショットと、
現在のポケモンGOの問い合わせ画面は変わっております。

現在の問い合わせ画面は、下記の記事で紹介されている
「selmodal.js」という、JQueryのプラグインを利用することで
比較的簡単に実装することができます。

https://kinocolog.com/selmodal/

ぜひご検討のほどよろしくお願い致します。

Answer

ECマスターズ 北原様。

スワロースポーツ 岡本です。
お世話になります。

早速ページに反映致しました。
https://www.4860.jp/sp/sub/test/

頂いた参考ページと同じ挙動になりませんでした。
Chromeのデベロッパーツールでエラーを確認したところ、添付画像の内容でした。

JQueryの方に問題がありそうな内容でしたが、
エラー内容を解消するには、どのように修正を行えばよろしいでしょうか。

すみませんが、ご確認お願いいたします。###HR######IMG0b17c00446e46e6b685eaa0e46b8b62a1.jpegIMG0###

Answer

ECマスターズの北原です。

>JQueryの方に問題がありそうな内容でしたが、
>エラー内容を解消するには、どのように修正を行えばよろしいでしょうか。

おっしゃる通りJQueryに問題がございました。
selmodal.jsは事前にJQueryが読み込まれている必要がありますが、
下記のJQueryを読み込むスクリプトがselmodal.jsより後に記述されているため、
エラーとなっておりました。



上記のタグを内に書き込むことでエラーが解消されますので、
お試し頂ますよう、お願いたします。

Answer

ECマスターズ 北原様。

スワロースポーツ 岡本です。
お世話になります。

早速、下記の内容を確認しました。

> 

> 上記のタグを内に書き込むことでエラーが解消されますので、
> お試し頂ますよう、お願いたします。

内に、
があり、
selmodal.jsより上にありましたが、こちらのJQueryで合っていますでしょうか？

エラーで表示している、

のJQueryをheadタグ内でしょうか？

すみませんがご確認、お願いいたします。###HR######IMG0cb6cf56c7c4f13a251189b23bad20bc7.jpegIMG0###

Answer

ECマスターズの北原です。

>内に、
>があり、
>selmodal.jsより上にありましたが、こちらのJQueryで合っていますでしょうか？

ページを確認しましたところ、
ページ内に下記３つのJQueryを読み込んでいるようでした。





複数のJqueryを記述してしまうと、
正しく読み込まれないことがございますので、
一番最新のバージョンの下記タグのみをタグに記述し
他のものはコメントアウトをしていただけますでしょうか。



お手数ですが、お試しくださいますようお願い致します。

Answer

ECマスターズ 北原様。

スワロースポーツ 岡本です。
お世話になります。

ご連絡が遅くなり申し訳ございません。

ページに読み込ませている3つのJQueryですが、



での対応との事でしたが、下記のJQueryでも動作確認できました。



他の2つのJQueryを外して、該当のページ以外に影響が無いことを確認を行ってから実際のページへ対応を進めたいと思います。
確認・調査して頂き、ありがとうございました。