Несовместимость браузера с jQuery, IE и FF

Question

У меня есть простой jQuery, который позволяет пользователю щелкнуть ссылку в LI, чтобы фильтровать параметры в списке выбора. Он полностью функционирует в FF, но только частично в Chrome или IE. Я не получаю никаких ошибок в консоли. Проблема в том, что обновление класса работает в Chrome и IE, но не в фильтрации.

Я должен быть на правильном пути, так как он работает в FF, но я предполагаю, что у меня отсутствует концепция здесь. Я очень ценю ваш вклад.

JQuery:

Резюме: получить идентификатор щелкнул ли, обновить класс Ли, использовать это значение 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

Проблема заключается в том, что вы triyng для «display: none» в многократном поле выбора, которое не будет работать. Вместо этого вы должны установить видимость: 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"); 
    } 
});