lọc dữ liệu dựa trên thuộc tính dữ liệu tùy chỉnh bằng cách sử dụng jquery

Question

Tôi đã tự hỏi nếu ai đó có thể trợ giúp với một số mã jquery để làm như sau. Tôi có một danh sách thả xuống chọn danh sách mà tôi muốn lọc danh sách các hộp kiểm.

Đây là những gì mã html của tôi trông giống như

<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> 

Vì vậy, nếu Township được chọn (05) thì chỉ có các divs với dữ liệu tùy chỉnh-type = "05" sẽ hiển thị.

Có cách nào để đạt được điều này và nếu như vậy một số trợ giúp sẽ được nhiều đánh giá cao

Answer 1

Đây là số jsFiddle để kiểm tra.

$('#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(); 
    } 
}); 

Nếu "Tất cả" được chọn, tất cả các tùy chọn được hiển thị, nếu không chỉ hiển thị các phần tử phù hợp.

Answer 2

Hãy thử điều này

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

Answer 3

Bạn có thể làm một cái gì đó như:

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

Đoạn mã trên tay cầm sự kiện change của phần tử <select> của bạn bằng cách kết hợp các yếu tố <div> là con trực tiếp của chínhcủa bạnyếu tố, ẩn tất cả, sau đó áp dụng filter() để có được các trẻ em có thuộc tính data-custom-type khớp với giá trị đã chọn và hiển thị các giá trị này.