2

「T」または「F」に等しい「アクティブ」のカスタム属性をそれぞれ含むオプションを含む選択リストがあります。どのボタンをクリックしたかに基づいて、アクティブな属性が「T」に等しい、またはアクティブな属性が「F」に等しいオプションのみを表示するようにオプションをフィルタリングできるようにするjavascriptまたはjQuery関数を設定しようとしています。基本的に、適切な選択オプションを非表示/表示する「アクティブを表示」/「非アクティブを表示」ボタンがあります。

私が始めるために提供できるサンプルはありますか? 事前にどうもありがとうございました！

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') と呼んでいます

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

私は時々このようにします：

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 に答える