根据自定义属性过滤 SELECT 选项

Question

我有一个选择列表，其中每个选项都包含一个自定义属性“活动”，该属性等于“T”或“F”。我正在尝试设置一个 javascript 或 jQuery 函数，该函数将允许我过滤选项以仅根据他们单击的按钮显示那些 active 属性等于“T”或 active 属性等于“F”的那些。本质上具有“显示活动”/“显示非活动”按钮，它们将隐藏/显示适当的选择选项。

有没有人可以提供任何样品来帮助我入门？非常感谢您！

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

使用 David Xu 提供的示例，我想出了上面的函数。当我单击“显示活动”按钮时，它确实将选项限制为仅标记为活动 =“T”的选项，但是在尝试非活动时它显示一个空的选择框。我可以在 Google Chrome 开发工具中看到标记正在更改，当我选择“显示非活动”时，标记为 style="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”标签内的每个“option”项：

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

希望对你有帮助

Answer 3

不使用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 4

我有时会这样：

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 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 无法与其他方法很好地配合使用，它们都可以使用涉及对您不想显示的选项的某种删除。

希望它可以更容易。 . .