0

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

我已经把网站放在 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 个问题。所以我想我会在这里尝试一下，看看是否有任何brightspark可以缩小我的问题。

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

1 回答 1

0

简单的答案是您将样式设置为内联。<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;
        });
});
于 2013-08-07T13:19:07.263 回答