JavaScriptでプルダウンメニューが開発環境とweb公開環境で違う動作をする

Question

実現したいこと

ウェブサイトで、ボタンをクリックすると、第1節〜第10節が縦に並んだリストがプルダウンで表示される機能を作りたいです。

発生している問題・分からないこと

開発環境では、問題なく動作するのですが、web公開環境ではそのような動作をしません。
厳密にはweb公開環境では、「第1節」の項目でボタンをクリックすると「第1節」のみのプルダウンが表示されます。
上記問題は、Andoidに起因している気がしております。
IOSスマートフォンではchromeもedgeも問題なく動きましたが、Androidスマートフォンでは、chromeもedgeもうまく動作しません。
Androidが動作不良を起こしているようなのですが、このような時の対策をご存知でしたら教えていただけないでしょうか。

エラーメッセージ

エラーメッセージは出力されておりません。

該当のソースコード

<script>
        document.addEventListener("DOMContentLoaded", function() {
            console.log("スクリプトが読み込まれました");

            const totalRounds = 38;
            let currentRound = <?= $selectedRound ?>;
            console.log("現在の節:", currentRound);

            const prevButton = document.getElementById("prev-round");
            const nextButton = document.getElementById("next-round");
            const currentRoundContainer = document.getElementById("current-round-container");
            const roundSelector = document.getElementById("round-selector");

            if (!prevButton || !nextButton || !currentRoundContainer || !roundSelector) {
                console.error("要素が見つかりません");
                return;
            }

            roundSelector.style.display = "none"; // 初期状態で非表示

            // 前の節に移動
            prevButton.addEventListener("click", function() {
                if (currentRound > 1) {
                    currentRound--;
                    updateRound();
                }
            });

            // 次の節に移動
            nextButton.addEventListener("click", function() {
                if (currentRound < totalRounds) {
                    currentRound++;
                    updateRound();
                }
            });

            // 現在の節を更新
            function updateRound() {
                window.location.href = `index.php?round=${currentRound}`;
            }

            // 真ん中の四角（親コンテナ）をクリックしたらプルダウンメニューを表示/非表示
            currentRoundContainer.addEventListener("click", function(event) {
                console.log("プルダウンメニューの表示/非表示が切り替えられました");
                event.stopPropagation();

                // スマホのブラウザ互換性を考慮してスタイルとsizeを両方設定
                if (roundSelector.style.display === "none" || roundSelector.style.display === "") {
                    roundSelector.style.display = "block";
                    roundSelector.setAttribute("size", totalRounds); // すべての節を表示
                    roundSelector.focus(); // フォーカスを設定
                } else {
                    roundSelector.style.display = "none";
                    roundSelector.removeAttribute("size"); // sizeをリセット
                }
            });

            // プルダウンで節を選択した場合
            roundSelector.addEventListener("change", function() {
                const selectedRound = roundSelector.value;
                console.log("選択された節:", selectedRound);
                window.location.href = `index.php?round=${selectedRound}`;
            });

            // ページの他の場所をクリックした時にプルダウンを閉じる
            document.addEventListener("click", function(event) {
                if (!event.target.closest(".current-round-container")) {
                    roundSelector.style.display = "none";
                    roundSelector.removeAttribute("size"); // sizeをリセット
                }
            });
        });
    </script>

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

解決できなかったためこちらで質問をさせていただきました。

補足

特になし

Comments

[juner]

サンプルとして動作するhtml javascript css は用意できますでしょうか？

[Lhankor_Mhy]

すでにご解決のようですが、Android Chrome|Edge の問題であれば、カスタイマイズ可能select要素がテスト実装段階です。

https://open-ui.org/components/customizableselect/
https://chromestatus.com/feature/5737365999976448

Answer 1

普通にセレクトボックスを使うことをおすすめします

Answer 2

仮に、節の表示数が下記の部分で変更されていると仮定した場合、開発環境と本番環境で異なる分岐になっている可能性はないでしょうか。
思い込みを一旦捨てて、それぞれの分岐先にconsole文を入れて、本番環境と開発環境のコンソールでどのように表示されるか確認してみては？

                // スマホのブラウザ互換性を考慮してスタイルとsizeを両方設定
                if (roundSelector.style.display === "none" || roundSelector.style.display === "") {
                    roundSelector.style.display = "block";
                    roundSelector.setAttribute("size", totalRounds); // すべての節を表示
                    roundSelector.focus(); // フォーカスを設定
                } else {
                    roundSelector.style.display = "none";
                    roundSelector.removeAttribute("size"); // sizeをリセット
                }

Comments

[kakashi55]

回答ありがとうございます。
ベストアンサーは別の方を選ばせていただきましたが、こちらの回答も非常に参考になりました。

[kakashi55]

調べると、私のIOSスマートフォンではchromeもedgeも問題なく動きましたが、Androidスマートフォンでは、chromeもedgeもうまく動作しません。
Androidが動作不良を起こしているようなのですが、このような時の対策をご存知でしたら教えていただけないでしょうか。