jquery

Question

का उपयोग कर कस्टम डेटा विशेषता के आधार पर डेटा फ़िल्टर करना मैं सोच रहा था कि कोई निम्नलिखित करने के लिए कुछ jquery कोड के साथ मदद कर सकता है या नहीं। मेरे पास एक ड्रॉप डाउन चयन सूची इनपुट है जो मैं चेकबॉक्स की एक सूची फ़िल्टर करना चाहता हूं।

यहाँ मेरी एचटीएमएल कोड की तरह

<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) दिखता है उसके बाद ही डेटा-कस्टम प्रकार = साथ divs "05" प्रदर्शित करेगा है।

वहाँ इस लक्ष्य को हासिल करने के लिए एक रास्ता है और यदि ऐसा है तो कुछ मदद की बहुत सराहना की जाएगी

Answer 1

यहां एक 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(); 
    } 
}); 

यदि "सभी" चुना गया है, तो सभी विकल्प प्रदर्शित होते हैं, अन्यथा केवल मेल खाने वाले तत्व प्रदर्शित होते हैं।

Answer 2

इस

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

Answer 3

प्रयास करें आप की तरह कुछ कर सकता है:

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

हैंडल ऊपर कोड change तत्व की घटना <div> तत्वों से मेल खाती है जो आपके मुख्यके प्रत्यक्ष बच्चे हैंतत्व, उन सभी को छुपाएं, फिर filter() को उन बच्चों को प्राप्त करने के लिए आवेदन करें जिनके data-custom-type विशेषताएँ चयनित मान से मेल खाते हैं, और इन्हें दिखाते हैं।