时间戳

首页 > 解决方案 > Safari 中的下拉菜单不显示下拉项目

python - Safari 中的下拉菜单不显示下拉项目

问题描述

我的下拉菜单适用于 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 () {

                    });

        }

标签： pythoncssdjango

解决方案

看起来您的<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>

推荐阅读