-1

選択したオプションに基づいて、li 要素を表示するフィルターを作成しようとしました。オプションを1つだけ選択すると、要素が選択されたときに表示され、選択を解除すると消えます。

ただし、複数のオプションを選択すると、要素が最初に表示されてから再び消えます。ループ内の何かが間違っていると思いますか？

Javascript:

$(document).ready(function() {

  //Hide all li-Elements
  $(".result li").hide();

  //When select-Element is change, do something
  $("select").change(function() {

    //Create array for selected Options 
    var arr = new Array;

    //Add all selected Options to the array
    $("select option:selected").each(function() {
      arr.push($(this).val());
    });
    //Create a Loop to display li-Elements
    for (var i = 0, l = arr.length; i < l; i++) {

      /*slideDown all elements which contain one
          of the selected elements in array*/
      $("li:contains(" + arr[i] + ")").slideDown("slow");
      /*slideUp all elements which do not contain
          the selected elements in array*/
      $('li:not(:contains(' + arr[i] + '))').slideUp("slow");
    }
  });

});

HTML:

<select multiple>
  <option value="volvo">volvo</option>
  <option value="saab">saab</option>
  <option value="opel">opel</option>
  <option value="audi">audi</option>
</select>

<div class="result">
  <ul>
    <li>volvo</li>
    <li>volvo coolio</li>
    <li>saab</li>
    <li>opel</li>
    <li>opelino</li>
    <li>opel meier</li>
    <li>audi</li>
  </ul>
</div>

プレビュー: https://jsfiddle.net/onclesam/2z56oom2/3/

4

2 に答える 2