Javascript 跨浏览器问题jquery下拉菜单

好的，我前一段时间做了一个网站，总是有菜单系统的问题。基本上，您可以单击地图上的某个位置，然后在右侧的下拉菜单中显示子位置列表。这些始终是它们的选项，它们只是根据选项类显示的机会

我把这个网站放在shiftera.co.uk上，这样你就可以看到他们的网站了

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

我认为这个问题更多的是一个css问题或者是大量的css问题

地图链接的一个示例是

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

下面是基于地图单击显示正确项目的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可以缩小我的问题范围

• 根据主网站的更改更新了删除windows加载

---

简单的答案是，您正在将样式设置为内联。
标记不应该是内联的，或者具有任何类似的样式。导致问题的内联样式i
而是在需要时添加
标记。将所有值存储在对象中以添加/删除它们
顺便说一下。把那个装窗户的东西拿开
以下是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;
        });
});

---

我最初是在每次单击地图时通过jquery加载器运行查询的，但在发生相同问题的地方。或者你指的是另一种方法，如果可能的话，你能给我举个例子吗？我可以在你的网站上看到代码的工作原理。请接受答案以结束此问题。

//<![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();
    });
}); //]]>

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