Параметры фильтра SELECT на основе пользовательского атрибута

Question

У меня есть список выбора с параметрами, каждый из которых содержит пользовательский атрибут «active», который либо равен «T», либо «F». Я пытаюсь настроить функцию javascript или jQuery, которая позволит мне фильтровать параметры, чтобы показывать только те, чей активный атрибут равен «T», или активный атрибут которого равен «F», на основе какой кнопки они нажимают. По существу, есть кнопки «Показать активные»/«Показать неактивные», которые будут скрывать/показывать соответствующие параметры выбора.

У кого-нибудь есть образцы, которые они могли бы предоставить, чтобы начать? Заранее большое спасибо!

function toggleUnitsSelector(active) 
{ 
    $('#unitsSelector option').each(function() { 
     if($(this).attr("active")==active){ 
      $(this).show(); 
     } else { 
      $(this).hide(); 
     } 
    }); 
} 

Используя пример, предоставленный Дэвидом Сюй, я придумал вышеприведенную функцию. Он действительно ограничивает возможности только те, которые обозначены как active = «T», когда я нажимаю кнопку «показать активную», однако при попытке неактивности она показывает пустой поле выбора. В инструментах Google Chromes dev я вижу, что разметка меняется, и когда я выбираю «показывать неактивные» те, которые были отмечены стилем = «display: none»; перейти к style = "display: inline;" но они не появляются. Есть идеи? Кроме того, я звоню эту функцию toggleUnitsSelector ('T') или toggleUnitsSelector ('F')

Answer 1

Довольно простой вариант совместить обновленную версию этого плагина: https://stackoverflow.com/a/9234883/2287470 с помощью простого обработчика событий:

$.fn.toggleOption = function(show) { 
    return this.each(function(){ 
     $(this).toggle(show); 
     if(show) { 
      if($(this).parent('span.toggleOption').length) $(this).unwrap(); 
     } else { 
      $(this).wrap('<span class="toggleOption" style="display: none;" />'); 
     } 
    }); 
}; 

var list = $('select option'), buttons = $('button'); 

list.toggleOption(false); 

buttons.on('click', function() { 
    var filter = $(this).hasClass('active') ? "[data-active=F]" : "[data-active=T]"; 
    list.toggleOption(true).filter(filter).toggleOption(false); 
}); 

Это скрывает варианты в совместимом пути кросс-браузер и по-прежнему остается весьма малы размер. Здесь он работает: http://jsfiddle.net/jTngY/2/

Answer 2

С петлей JQuery над каждым "вариантом" элементом в "выберите" тег:

$("#select_list option").each(function(i,o) { 
    if (o.attr("active") == "T") { 
     console.log(o + " is T"); 
    } 
}); 

Надеется, что это помогает

Answer 3

я иногда так:

someSelectInit($("select")); 

$("a.someLink").click(function(){ 
    someSelectFilter($("select"), 'someAttrName','someAttrValue'); 
    return false; 
}); 

function someSelectInit(objects) 
{ 
    $(objects).each(function(i,e){ 
     that = $(e); 
     options = []; 
     that.find('option').each(function(optionIndex, optionElement){ 
      option = $(optionElement); 
      options.push({ 
       value: option.attr('value'), 
       text: option.text(), 
       someAttrName: option.attr(someAttrName) 
      }); 
     }); 
     that.data('options', options); 
     that.find("option:not(:disabled)").remove(); 
    }); 
} 

function someSelectFilter(selectElement, attrName, attrValue) 
{ 
    selectElement = $(selectElement); 
    selectElement.find('option:not(:disabled)').remove(); 
    options = $(selectElement).data('options'); 
    for(var i in options) 
    { 
     if(options[i].someAttrName != attrValue) 
      continue; 

     option = $('<option />').attr('value', options[i].value).text(options[i].text); 
     selectElement.append(option); 
    } 
} 

Answer 4

Без использования JQuery, и предполагая, что каждый элемент списка имеет атрибут класса для «select_list_option»

function showItemsForType(type) { 
    var elementList = document.getElementsByClassName('.select_list_option'), 
     elementArray = Array.prototype.slice.call(elementArray); 

    elementArray.forEach(function(el) { 
     if (el.getAttribute('active') === type) { 
      // display el 
     } 
    }); 
} 

showItemsForType('T'); 

Answer 5

К сожалению, для этого нет счастливого ответа, потому что IE - это икру дьявола. , ,

Это должно быть столь же легко, как:

function toggleUnitsSelector(active) { 
    $("#unitsSelector option").hide(); 
    $("#unitsSelector option[active='" + active + "']").show(); 
} 

И что прекрасно работает во всех разумных браузеров, однако, IE (по крайней мере, большинство, если не все их версий) не является разумный браузер и, следовательно, не позволит вам скрывать выбранные опции.

Итак, чтобы заставить их не отображаться в IE, вы должны «получить творческий подход», а «сделайте креатив», я имею в виду делать то, что вам не нужно делать, чтобы поддерживать такую ​​функциональность.

Одним из таких решений, которые вы могли бы использовать будут иметь два скрытые <select> элементов, каждый из содержащихся в active="T" и active="F" вариант разделены, и использовать их для заполнения первичного селектора (который я дефолт в «активные» варианты), а необходимо:

<style> 
    .hidden {display: none;} 
</style> 

<div> 
    <select id="unitsSelector"> 
     <option value="1" active="T">1</option> 
     <option value="2" active="T">2</option> 
     <option value="4" active="T">4</option> 
     <option value="6" active="T">6</option> 
     <option value="10" active="T">10</option> 
    </select> 
    <select id="hiddenSelectorT" class="hidden"> 
     <option value="1" active="T">1</option> 
     <option value="2" active="T">2</option> 
     <option value="4" active="T">4</option> 
     <option value="6" active="T">6</option> 
     <option value="10" active="T">10</option> 
    </select> 
    <select id="hiddenSelectorF" class="hidden"> 
     <option value="3" active="F">3</option> 
     <option value="5" active="F">5</option> 
     <option value="7" active="F">7</option> 
     <option value="8" active="F">8</option> 
     <option value="9" active="F">9</option> 
    </select> 

    <input type="button" onclick="javascript: toggleUnitsSelector('T');" value="Show Active" /> 
    <input type="button" onclick="javascript: toggleUnitsSelector('F');" value="Show Inactive" /> 
</div> 

<script type="text/javascript"> 
    function toggleUnitsSelector(active) { 
     $("#unitsSelector").empty(); 
     $("#hiddenSelector" + active + " option").each(function() { 
      $(this).clone().appendTo($("#unitsSelector")); 
     }); 
    } 
</script> 

Каждый раз, когда вы нажимаете на кнопки, он очищает отображаемое выпадающее меню и заполнит его варианты от какого скрытых выпадающих содержат опции, которые нужны. И он работает во всех браузерах. , ,

Есть много других подходов, которые вы могли бы использовать (хранить значения в массиве и строить параметры, которые вы хотите показать, например), но из-за неспособности IE хорошо играть с другими, все они будет включать некоторое удаление параметров, которые вы не хотите отображать.

Пожелать может быть проще. , ,