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

使用David Xu提供的示例我想出了上面的功能。当我单击“显示活动”按钮时，它确实将选项限制为仅标记为active =“T”的选项，但是在尝试不活动时它显示一个空的选择框。我可以在Google Chromes dev工具中看到标记正在更改，当我选择“show inactive”时标记为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

我有时喜欢这样：

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，并假设每个列表项的class属性为'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中显示，你必须“有创意”，而“通过”创造性“，我的意思是做一些你不应该做的事情来支持这种功能。< / p>

您可以使用的一个此类解决方案是拥有两个隐藏的<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无法与其他人一起发挥作用，它们都将继续涉及某种删除您不想显示的选项。

希望它可以变得更容易。。

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

5 个答案: