python - Safari 浏览器中的下拉菜单不显示下拉元素

Question

我的下拉菜单适用于 Chrome(台式机和移动设备)和 Firefox(台式机和移动设备)，但似乎不适用于 Safari(台式机)和 Chrome(平板电脑)。

这是在 Chrome 上工作的样子

这是它在 Safari 上的样子

HTML:

<button type="button" id="platform" class="btn btn-orange dropdown-toggle mr-2" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                    Select Platform
                </button>

<div class="dropdown-menu" id="plat-form-options">
                    {% for platform in game.platform.all %}
                        <option class="dropdown-item" value="{{ platform.id }}"
                                onclick="platFormSelect('{% url 'title-updates-ajax' slug=game.slug platform_id=platform.id %}', '{{ platform }}')">{{ platform }}</option>
                    {% endfor %}
                </div>

Javascript:

 $(document).ready(function () {
            if ($("#plat-form-options option").length > 0) {
                $("#plat-form-options option")[0].click();
            }

        });


        function platFormSelect(url, platform) {
            $('#platform').text(platform);


            $.get(url, function (response) {
                        $('#updates_data').html(response);

                    })
                    .done(function () {

                    })
                    .fail(function () {

                    });

        }

Answer 1

它看起来像你的 <option>标签应该是 <a>标签，因为它们没有包裹在 <select> 中.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option

试试这个:

<div class="dropdown-menu" id="plat-form-options">
  {% for platform in game.platform.all %}
      <a href="#" class="dropdown-item" value="{{ platform.id }}"
              onclick="platFormSelect('{% url 'title-updates-ajax' slug=game.slug platform_id=platform.id %}', '{{ platform }}')">{{ platform }}</a>
  {% endfor %}
</div>