jquery를 사용하여 사용자 지정 데이터 특성을 기반으로 데이터 필터링

누군가가 다음 작업을 수행 할 때 jquery 코드를 사용하면 도움이 될지 궁금합니다. 체크리스트 목록을 필터링하려는 드롭 다운 선택 목록 입력이 있습니다.jquery를 사용하여 사용자 지정 데이터 특성을 기반으로 데이터 필터링

여기 내 HTML 코드는 다음 데이터 - 사용자 정의 형 = 만 div의는 "05"이 표시됩니다 향을 선택 그렇다면

<span style="float:right;"> 

     <label>Filter</label> 
    <select id="office-type-list" name="OfficeTypes"><option value="00">All</option> 

     <option value="05">Township</option> 

     <option value="10">Municipality</option> 

     <option value="15">Elementary School</option> 

     <option value="20">High School</option> 

    </select> 

</span> 

<!-- List below --> 

<div name="Offices"> 
    <div data-custom-type="00"> 
     <input type="checkbox" name="Offices" id="Offices_0000" value="0000" /> <label for="Offices_0000">All</label> 
    </div> 
    <div data-custom-type="05"> 
     <input type="checkbox" name="Offices" id="Offices_0010" value="0010" /> <label for="Offices_0010">Township 1p</label> 
    </div> 
    <div data-custom-type="05"> 
     <input type="checkbox" name="Offices" id="Offices_0020" value="0020" /> <label for="Offices_0020">Township 2</label> 
    </div> 
</div>

(05)의 모습입니다.

이를 달성 할 수있는 방법이 있나요 그렇다면 도움이 많이

출처

2012-01-23 zSynopsis

먼저 data-custom-type은 HTML5 만 사용하지 않는 한'data-r'이어야합니다. 오래된 브라우저에서는 실패 할 수 있습니다. 두 번째 것은 div가 이름을 가질 수없고, 이름은 입력에만 사용되며, id는 이름으로 변경됩니다. – Dementic

항목을 선택하고 '모두'를 선택하면 선택한 대답이 실패합니다. 이 작업을 수행 할 때 원래의 div/checkbox가 아닌 'All'만 표시됩니다. 내 대답도 그 사건을 처리합니다. – j08691

당신은 틀리지 않아요. 나는 내 대답을 업데이 트하고 앞서 갔다. 감사. – zSynopsis

여기는 jsFiddle입니다.

$('#office-type-list').change(function(){ 
    var sel = $(this).val(); 
    $('div[name="Offices"] div').hide(); 
    if(sel != "00"){ 
     $('div[data-custom-type="'+sel+'"]').show(); 
    } 
    else { 
     $('div[name="Offices"] div').show(); 
    } 
});

"모두"를 선택하면 모든 옵션이 표시되고, 그렇지 않으면 일치하는 요소 만 표시됩니다.

출처

2012-01-23 16:36:35 j08691

당신은 같은 것을 할 수있는이

$("#office-type-list").change(function(){ 
    $("div[data-custom-type]").hide(); 
    $("div[data-custom-type=" + this.value +"]").show(); 
});

출처

2012-01-23 16:24:09 ShankarSangoli

을 시도 주시면 감사하겠습니다 :

$("#office-type-list").change(function() { 
    var customType = $(this).val(); 
    $("div[name=Offices]").children("div").hide().filter(function() { 
     return $(this).data("custom-type") == customType; 
    }).show(); 
});

핸들 위의 코드를 귀하의 <select> 요소의 change 이벤트는 귀하의 주인이 직접적인 자녀 인 <div> 요소와 일치하여 Offices 요소를 모두 숨기고 filter()을 적용하여 data-custom-type 속성이 선택된 값과 일치하는 하위 항목을 가져 와서 표시합니다.

출처

2012-01-23 16:26:22

jquery를 사용하여 사용자 지정 데이터 특성을 기반으로 데이터 필터링

답변

관련 문제