1

ユーザーがリンクをクリックしLIて、選択リストのオプションをフィルタリングできる単純なjQueryがあります。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

問題は、機能しない複数の選択ボックスで「display: none」をしようとしているということです。代わりに、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");
    }
});
于 2013-02-25T20:36:51.363 に答える