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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

6443閲覧

動的にselect内容を変更した際の不具合

teratech

総合スコア17

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2018/07/15 07:36

お世話になります。

以下のように、selectタグが2つあり、1つ目で選択した内容に応じて、2つ目のoptionの内容を動的に変えるようなプログラムを組んでおります。
PCでは問題ないのですが、iPhoneでは、select1を選択し、完了ボタンを押さずにselect2を直接タップするとajaxの内容が反映されずに、"loading"で処理が止まってしまいます。
別のイベントで処理を動かしてみましたがうまくいかず、良い方法ございましたら、ご教示頂ければ幸いです。

宜しくお願い申し上げます。

html

1 <select id="select1"> 2 <option value="value_a">value_a</option> 3 <option value="value_b">value_b</option> 4 <option value="value_c">value_c</option> 5 </select> 6 7 <select id="select2"> 8 <option value="">select1を先に選択</option> 9 </select> 10

Javascript

1 $(function(){ 2 $('#select1').change(function(){ 3 var first_value = $('#select1').val(); 4 $('select2').html('<option>loading...</option>'); 5 $.ajax({ 6 url: "/PATH", 7 type: "POST", 8 dataType: "text", 9 data: first_value, 10 success: function(data, status){ 11 $('#select2').html( 12 "<option value=AAA>AAA</option> 13 <option value=BBB>BBB</option> 14 <option value=CCC>CCC</option>" 15 ); 16 } 17 }); 18 }); 19 }); 20

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんにちは。

以下の2点を追加すると意図したUIになるのではないかと思います。

(1) 初期表示の際、 #select2disabled にする。

(2) APIが成功で返ってきたら、(1)で設定した disabled を解除する。

以下は、ご質問のコードをもとに、上記 2点の修正をしたものです。
(※ただし、 API のURLとメソッドは適当に変えました。)

https://jsfiddle.net/xjhbc27t/29/

上記ですが、 iPhone では試していませんが、iPadのSafariでは意図した動きになりました。

投稿2018/07/15 08:07

編集2018/07/15 08:09
jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

teratech

2018/07/15 08:22

早速のご回答、誠にありがとうございます。 ご連絡頂いた処理ではドラムロールを必ず閉じることが必須になりますが、ドラムロールを閉じずに次のselectタグに移行できるようにするのは仕様上難しいでしょうか? (ご連絡頂いた処理において、select1に戻った時にもdisabledを入れるようにすれば繰り返し使えますね。)
jun68ykt

2018/07/15 08:39

なるほど。実現したいのは、そういうことなのですね。ちょっと調べてみます。
teratech

2018/07/15 10:11 編集

ありがとうございます。 select2のタップの仕方によっては読み込み&disabledが外れる処理が動き(select2へのfocus移行はなし)、その後はselect2をもう一度タップするとselect2に移行できるようになりますね。 初回の動きが安定しませんが・・ 力技な感じがしますが、ajaxの返り値が戻ってきた段階でfocusを自動でselect2に移行させればいけるかもしれません。 →ダメでした。focusは移行してもドラムロールがうまく移行せずでした。
jun68ykt

2018/07/16 15:05

こんにちは。 私も手元の iPhone8 のSafariでやってみました。 その結果、ご質問にある元のコードだと (1) #select1 をタップして画面下部に、ドラムロールが表示され、value_a、value_b、value_c が表示される。 (2) ドラムロールを動かして、value_b を選び、完了はタップしないで、ドラムロールを開いたままにする。 (3) 上記の状態で、「select1を先に選択」と表示されている、#select2 をタップすると、APIの 成功後、#select2 の options が、AAA, BBB, CCC に上書きされ、#select2 は一つ目の AAA を表示しているが、 ドラムロールに表示されている選択肢は「loading...」の1個だけ という動作になることを確認しました。 #select2 のドラムロールは、APIを呼び出す直前にだけ「loading...」となって、APIの成功後には、$('#select2').html(・・・); で設定している #select2 の3つのoptionがドラムロールのほうにも反映して欲しいですよね。 同様の問題が投稿されていないか探したところ以下をみつけました。 force safari iOS select component to update when options change https://stackoverflow.com/questions/18339021/ これに対する回答で、一番上にあるものに、以下のように書かれています。 Safari uses a UIPickerView to display the dropdown menus. As you would expect, the title of the dropdown component in the page is updated according to the changes in the DOM but the picker view is not tightly coupled with the DOM so it isn't updated. The situation is the same with Chrome and Opera Mini. So in conclusion, it is not possible what you are trying to implement. You should look for other ways to make your dataset accessible. 要約すると、 (iOSの)SafariはドロップダウンリストのためにUIPickerViewを使っており、これはDOMとは緊密に結びついていないので、期待しているようには(ドラムロールのほうの)リストアイテムは更新されない。これは、Chromeでも Opera mini でも同じ。 ということのようです。 試しに、 $('#select2').html('<option>loading...</option>'); としているのを、以下 setTimeout(function(){ $('#select2').html('<option>loading...</option>'); }, 0); のように非同期にすると、「loading...」 にもならなくなりました。 なので、非同期処理からのDOM変更にはUIPickerViewのリストアイテムは反映されない、 ということのように思えます。 以上参考になれば幸いです。
teratech

2018/07/17 15:07

ご丁寧にありがとうございます。 やはり仕様上無理なのですね・・一度blurする方法しか現状はなさそうですね。 データが膨大でなければdisplayプロパティで調整できそうですが、目の前の案件はデータ量が多いので厳しそうです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問