2

我有一个包含选项的选择列表，每个选项都包含一个“活动”的自定义属性，该属性等于“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 提供的示例，我想出了上面的函数。当我单击“显示活动”按钮时，它确实将选项限制为仅标记为 active="T" 的选项，但是在尝试非活动时它会显示一个空的选择框。我可以在 Google Chrome 开发工具中看到标记正在更改，当我选择“显示非活动”时，标记为 style="display:none;" 的标记 切换到 style="display:inline;" 但他们没有出现。有任何想法吗？另外，我调用这个函数 toggleUnitsSelector('T') 或 toggleUnitsSelector('F')

4

5 回答 5

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/

于 2013-08-06T20:57:55.580 回答
0

使用 jQuery 循环遍历“select”标签中的每个“option”项：

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

希望这可以帮助

于 2013-08-06T20:29:14.350 回答
0

我有时会这样：

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);
    }
}
于 2013-08-06T20:42:40.843 回答
0

不使用 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');
于 2013-08-06T20:43:09.830 回答
0

可悲的是，对此没有满意的答案，因为 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 无法与其他方法很好地配合，它们都将涉及一些删除您不想显示的选项。

希望它可以更容易。. .

于 2013-08-06T22:02:56.117 回答