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

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

ただいまの
回答率

90.50%

  • JavaScript

    16434questions

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

  • HTML5

    4019questions

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

  • Ajax

    1090questions

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

  • iPhone

    979questions

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

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 221

teratech

score 11

お世話になります。

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

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

    <select id="select1">
        <option value="value_a">value_a</option>
        <option value="value_b">value_b</option>
        <option value="value_c">value_c</option>
    </select>

    <select id="select2">
        <option value="">select1を先に選択</option>
    </select>
        $(function(){
            $('#select1').change(function(){
                var first_value = $('#select1').val();
                $('select2').html('<option>loading...</option>');
                $.ajax({
                    url: "/PATH",
                    type: "POST",
                    dataType: "text",
                    data: first_value,
                    success: function(data, status){
                        $('#select2').html(
                            "<option value=AAA>AAA</option>
                              <option value=BBB>BBB</option>
                              <option value=CCC>CCC</option>"
                        );
                    }
                });
            });
        });
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

こんにちは。

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

(1) 初期表示の際、 #select2 を disabled にする。

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

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/15 17:22

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

    キャンセル

  • 2018/07/15 17:39

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

    キャンセル

  • 2018/07/15 19:08 編集

    ありがとうございます。
    select2のタップの仕方によっては読み込み&disabledが外れる処理が動き(select2へのfocus移行はなし)、その後はselect2をもう一度タップするとselect2に移行できるようになりますね。
    初回の動きが安定しませんが・・

    力技な感じがしますが、ajaxの返り値が戻ってきた段階でfocusを自動でselect2に移行させればいけるかもしれません。
    →ダメでした。focusは移行してもドラムロールがうまく移行せずでした。

    キャンセル

  • 2018/07/17 00: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のリストアイテムは反映されない、
    ということのように思えます。

    以上参考になれば幸いです。

    キャンセル

  • 2018/07/18 00:07

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

    キャンセル

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

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • JavaScript

    16434questions

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

  • HTML5

    4019questions

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

  • Ajax

    1090questions

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

  • iPhone

    979questions

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