javascript - 跨浏览器问题 jquery 下拉菜单

Question

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

我已将站点放在 shiftera.co.uk 上，这样您就可以看到它们了。

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

我认为问题更多的是 css 问题或大量 css 问题。

map 链接的一个例子是

<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; }

这是根据 map 点击显示正确元素的 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 个问题。所以我想我会在这里尝试，看看是否有任何 brightspark 可以缩小我的问题范围。

• 根据主网站的变化更新了删除窗口加载。

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;
        });
});