Question

我有一些简单的jQuery，允许用户点击LI中的链接来过滤选择列表中的选项。它完全在FF中运行，但仅部分在Chrome或IE中运行。我在控制台中没有收到任何错误。问题是类更新适用于Chrome和IE，但不适用于过滤。

我必须走上正轨，因为它在FF工作，但我想我在这里错过了一个概念。我非常感谢您的意见。

jQuery的：

摘要：获取click li的id，更新li类，使用该id值仅显示带有该值的选择列表选项作为标题。

$("ul#mission-list li").click(function(){
    var currMission = this.id;
    $("li.here").removeClass();
    $(this).addClass('here');
    $("#selBox1").children('option').hide();
    if (currMission != 'all') {
        $("#selBox1").children("option[title^=" + currMission + "]").show();
    }
    else {
        $("#selBox1").children('option').show();
    }
});

HTML

选择列表就是这样：

<ul id="mission-list">
    <li id="all" class="here"><a href="javascript:void(0);">All</a></li>
    <li id="group1"><a href="javascript:void(0);">Group 1</a></li>
    <li id="group2"><a href="javascript:void(0);">Group 2</a></li>
    <li id="group3"><a href="javascript:void(0);">Group 3</a></li>
</ul>

And when the select options get rendered from the query, it's something like this (simplified down here).  This is the list that should be filtered in the display as a result of clicking the li option above:
<select multiple="multiple" id="selBox1">
    <option value="12" title="group1">Mission 1</option>
    <option value="34" title="group2">Mission 2</option>
    <option value="45" title="group2">Mission 3</option>
    <option value="78" title="group3">Mission 3</option>
    <option value="90" title="group3">Mission 3</option>
</select>

谢谢。

Answer 1

问题是你在多选框上“显示：无”，这是行不通的。相反，您必须设置为visible：hidden。但问题是这些值仍然存在，因此您可能不得不重新考虑并重新创建值的多重选择框。

http://jsfiddle.net/UBdhn/1

的Javascript

$("ul#mission-list li").click(function(){
    var currMission = this.id;
    console.log(this.id);
    $("li.here").removeClass();
    $(this).addClass('here');
    console.log($("#selBox1").children());
    $("#selBox1").children().css("visibility", "hidden");
    if (currMission != 'all') {
        $("#selBox1").children("option[title^=" + currMission + "]").css("visibility", "visible");
    }
    else {
        $("#selBox1").children('option').css("visibility", "visible");
    }
});

浏览器与jQuery，IE和FF的兼容性

1 个答案: