1

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

我必须走在正确的轨道上，因为它在 FF 中工作，但我认为我在这里遗漏了一个概念。我非常感谢您的意见。

jQuery：

摘要：获取单击的 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>

谢谢你。

4

1 回答 1

0

The issue is that you are triyng to "display: none" on a multiple select box which will not work. Instead you must set to visible: hidden. But the issue with this is that the values will still be there so you may have to rethink and recreate the multiple select box by the values instead.

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");
    }
});
于 2013-02-25T20:36:51.363 回答