>

2 개의 드롭 다운 목록이 있으며 내용을 개별적으로 필터링합니다. 선택한 옵션이 div에 있으면 div가 표시됩니다.

둘 다 함께 사용하여 콘텐츠를 필터링하려면 어떻게해야합니까? 내가 원하는 것은이 2 개의 드롭 다운 목록이 함께 작동하는 것입니다. 개별적으로 그들은 현재 콘텐츠를 필터링하고 있습니다. 따라서 드롭 다운 목록 1에서 콘텐츠 ABCDE를 개별적으로 필터링하고 드롭 다운 목록 2에서 콘텐츠 DEG를 필터링하면 둘 다 선택된 경우 DEG가 표시됩니다.

$(document).ready(function(){
  $('#level').on('change', function() {
    var val = $(this).val();
    if ( val == '00'){
      $(".textIc").show();
    }else{
      $('.textIc').each(function(){
        if($(this).children("p").text().indexOf(val) !==-1){
          $(this).show();
        }else{
          $(this).hide();
        }
      });
    }
  });
  $('#type').on('change', function() {
    var val = $(this).val();
    if ( val == '000'){
      $(".textIc").show();
    }else{
      $('.textIc').each(function(){
        if($(this).children("p").text().indexOf(val) !==-1){
          $(this).show();
        }else{
          $(this).hide();
        }
      });
    }
  });
});

div {
  border: 1px solid black;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<select id="level">
  <option value="00" selected><b>Default</b></option>
  <option value="Primary">Primary</option>
  <option value="Secondary">Secondary</option>
  <option value="Primary and Secondary">Primary and Secondary</option>
</select>
<select id="type">
  <option value="000" selected><b>Default</b></option>
  <option value="King">King</option>
  <option value="Queen">Queen</option>
</select>
<div class="textIc">
  <p>Primary</p>
  <p>King</p>
</div>
<div class="textIc">
  <p>Secondary</p>
</div>
<div class="textIc">
  <p>Primary and Secondary</p>
  <p>King</p>
  <p>bla bla bla bla</p>
</div>
<div class="textIc">
  <p>Primary</p>
  <p>Queen</p>
</div>

<div class="textIc">
    <p>Secondary</p>
</div>
<div class="textIc">
    <p>Primary and Secondary</p>
    <p>King</p>
    <p>bla bla bla bla</p>
</div>

여기 는 바이올린입니다.


  • 답변 # 1

    다음은 두 드롭 다운을 모두 고려하여 작동하는 코드입니다.

    $(document).ready(function(){
      $('#level').on('change', function() {
        var val = $(this).val();
        var typeVal = $('#type').val();
        if ( val == '00'){
        if(typeVal == '000'){
            $(".textIc").show();
        }else{
          $('.textIc').each(function(){
            if($(this).children("p").text().indexOf(typeVal)!==-1){
              $(this).show();
            }else{
              $(this).hide();
            }
          });
         }
        }else{
          $('.textIc').each(function(){
            if($(this).children("p").text().indexOf(val) !==-1 && (typeVal=='000' || $(this).children("p").text().indexOf(typeVal)!==-1)){
              $(this).show();
            }else{
              $(this).hide();
            }
          });
        }
      });
    });
    $(document).ready(function(){
      $('#type').on('change', function() {
        var val = $(this).val();
        var levelVal = $('#level').val();
        if ( val == '000'){
            if(levelVal == '00'){
                $(".textIc").show();
          }else{
            $('.textIc').each(function(){
              if($(this).children("p").text().indexOf(levelVal)!==-1){
                $(this).show();
              }else{
                $(this).hide();
              }
            });
           }
        }else{
          $('.textIc').each(function(){
            if($(this).children("p").text().indexOf(val) !==-1 && (levelVal=='00' || $(this).children("p").text().indexOf(levelVal)!==-1)){
              $(this).show();
            }else{
              $(this).hide();
            }
          });
        }
      });
    });
    
    

    여기에 테스트 용 바이올린이 있습니다.

    기본 아이디어:
    change 에서 드롭 다운 값을 모두 확인하십시오.  각 드롭 다운 이벤트.

    참고: 위 코드를 리팩터링하여 if 수를 줄일 수 있습니다  진술. .each() 를 사용하여 각 요소를 반복  별도의 function() 로 이동할 수 있습니다 .

  • 이전 java - Maven 속성 접두사"user"및"maven"은 특별한 의미가 있습니까?
  • 다음 ios - 오류가 발생했습니다 - swift 4에서 'string'유형에 'foregroundcolor'멤버가 없습니다