跨浏览器问题 jquery 下拉菜单

Question

好的，我不久前创建了一个网站，但总是遇到需要菜单系统的问题。基本上，您单击地图上的一个位置，然后它会在右侧的下拉菜单中显示子位置列表。这些始终是他们根据选项类显示的机会。

我已将网站放在 shiftera.co.uk，以便您可以看到他们的网站。

首先是问题。 1) IE - 列表从不过滤掉，它始终显示所有结果，无论类别如何。 2) Chrome - 下拉列表有时会被压扁，显示 1 个结果并隐藏其他您需要使用向上/向下箭头更改的结果，有时显示 3，有时显示 4。 3) Firefox - 列表显示在 1 长行中，不像通常的下拉列表。

我认为这个问题更多是 CSS 问题或大量 CSS 问题。

地图链接的一个例子是

<a href="Scotland#browse" class="areaselect" id="Scotland" title="Scotland">Scotland</a>

下拉列表虽然没有分开，但从数据库中生成，如下所示

<option value='AB25 1UH' class="Scotland">Aberdeen</option><option value=' WA14 4DW' class="Northwest">Altrincham</option>

如您所见，有些有空间，有些则没有。下拉列表的 id 为 apick，我使用下面的 css 在加载时将其隐藏。

#apick { display: none; }

这是基于地图点击显示正确项目的 javascript。

//<![CDATA[ 
$(document).ready(function(){

    $('.areaselect').on('click', function(event){
        $('#apick').css('display','inline');
        var id = $(this).attr('id')
        $('#apick option').not('.'+id).css('display','none');
        $('.'+id).css('display','inline').first().attr('selected','selected');
        event.preventDefault();
    });
}); //]]>

这已经让我发疯了很长时间，似乎如果我修复 1 个问题，又会创建 2-3 个问题。所以我想我会在这里尝试一下，看看是否有任何亮点可以缩小我的问题范围。

• 根据对主网站的更改更新了删除 Windows 负载。

Answer 1

简单的答案是您将样式设置为内联。 <option> 标签不应该是内联的，或者有任何类似的样式。导致问题的内联样式。

而是在需要时添加<option> 标签。将所有值存储在一个对象中以添加/删除它们。

顺便说一句。删除那个窗口加载的东西。

这里是 javascript 修复：

$(document).ready(function()
{
    var options = $('#apick option');
    var values = $.map(options, function(option)
    {
        return option;
    });

    $('.areaselect')
        .on('click', function()
        {
            var apick = $('#apick').empty();
            var id = $(this).attr('id');

            var newValues = $.grep(values, function(n, i)
            {
                return $(n).hasClass(id);
            });

            apick.append(newValues).show().find('option:first').attr('selected','selected');

            return false;
        });
});