مسج تصفية

Question

هل هناك طريقة لتصفية متعدد الخطوط حدد مربع باستخدام jQuery ؟

أنا جديدة إلى مسج و لا يمكن أن يبدو لمعرفة أفضل طريقة للقيام بذلك.

على سبيل المثال إذا كان لدي:

<select size="10">
   <option>abc</option>
   <option>acb</option>
   <option>a</option>
   <option>bca</option>
   <option>bac</option>
   <option>cab</option>
   <option>cba</option>
   ...
</select>

أريد أن تصفية هذه القائمة على أساس الاختيار المنسدلة مع:

<select>
   <option value="a">Filter by a</option>
   <option value="b">Filter by b</option>
   <option value="c">Filter by c</option>
</select>

Answer 1

شيء مثل هذا قد تفعل خدعة (على افتراض انك تعطي مرشح من قبل...' تحديد هوية من فلتر و تصفية / أخرى حدد معرف otherOptions):

$(document).ready(function() {
    $('#filter').change(function() {
        var selectedFilter = $(this).val();
        $('#otherOptions option').show().each(function(i) {
            var $currentOption = $(this);
            if ($currentOption.val().indexOf(selectedFilter) !== 0) {
                $currentOption.hide();
            }
        });
    });
});

تحديث:كما @براين ليانغ أشار في التعليقات, قد يكون لديك مشاكل وضع <option> العلامات عرض:لا شيء.ولذلك التالية يجب أن تعطيك أفضل عبر متصفح الحل:

$(document).ready(function() {
    var allOptions = {};

    $('#otherOptions option').each(function(i) {
        var $currentOption = $(this);
        allOptions[$currentOption.val()] = $currentOption.text();
    });

    $('#filter').change(function() {
        // Reset the filtered select before applying the filter again
        setOptions('#otherOptions', allOptions);
        var selectedFilter = $(this).val();
        var filteredOptions = {};

        $('#otherOptions option').each(function(i) {
            var $currentOption = $(this);

            if ($currentOption.val().indexOf(selectedFilter) === 0) {
                filteredOptions[$currentOption.val()] = $currentOption.text();
            }
        });

        setOptions('#otherOptions', filteredOptions);
    });

    function setOptions(selectId, filteredOptions) {
        var $select = $(selectId);
        $select.html('');

        var options = new Array();
        for (var i in filteredOptions) {
            options.push('<option value="');
            options.push(i);
            options.push('">');
            options.push(filteredOptions[i]);
            options.push('</option>');
        }

        $select.html(options.join(''));
    }

});