1

I found this jfiddle from another post on here.

Original: http://jsfiddle.net/ZTF5J/2/

With 1.9 and my changes: http://jsfiddle.net/4423c/

Looks like .live() is no longer supported with Jquery 1.9. I managed to modify a portion of the code to remove the dropdown menu, but adding a new filter doesn't work properly.

The following code allows you to remove a filter at a time. However, when adding a new filter, it doesn't check to see if a value currently exist. 

$('body').on('click', '.closeselect', function(){    
    if($('.closeselect').length > 1) {
        $(this).parent().remove();
        disableSelectedOption();
        $('#addmore').show();
    }
});

I've tried modifying the other portion where it checks the select value. Obviously it doesn't work properly. 

$('body').on('change', '.mySelect', function(){    
    disableSelectedOption();
});
4

2 回答 2

3

$(this).attr('disabled', 'disabled');

应该

$(this).prop('disabled', 'disabled');

来自jQuery .attr 手册条目：

从 jQuery 1.6 开始，.attr() 方法为尚未设置的属性返回 undefined。要检索和更改 DOM 属性，例如 表单元素的 、 或状态，请使用 checked.prop selected( )方法。disabled

于 2013-05-17T02:46:27.687 回答
0

代码有一些问题，所以我在这里重写了它：

$(function() {
    var $container = $('.js-selectblock'),
    nrOfOptions = $container.find('select').prop('options').length,
    $getBlocks = function() {
        return $container.children('.js-select');
    },
    $getParent = function(element) {
        return $(element).closest('.js-select');
    };

    $('#addmore').click(function() {
        var $blocks = $getBlocks();

        if ($blocks.length < nrOfOptions) {
            // restrict values on new dropdown
            var $new = $blocks.eq(0).clone();
            restrictValues($new.find('select'), getSelectedValues(), true);
            $new.appendTo($container);

            updateButtons();
        }
    }); 

    $container.on('click', '.closeselect', function() {
        if ($getBlocks().length > 1) {
            $getParent(this).remove();
            updateButtons();
        }
    });

    $container.on('change', '.mySelect', function() {
        $getBlocks().not($getParent(this)).each(function() {
            restrictValues($('select', this), getSelectedValues());
        });
    });

    function restrictValues($element, values, isnew)
    {
        var options = $element.prop('options'),
        selected = $element.prop('selectedIndex');

        for (var i = 0; i < options.length; ++i) {
            if (values.indexOf(options[i].value) !== -1) {
                options[i].disabled = isnew || selected != i;

                if (isnew && selected == i) {
                    ++selected;
                }
            } else {
                options[i].disabled = false;
            }
        }
        $element.prop('selectedIndex', selected);
    }

    function getSelectedValues()
    {
        var values = [];

        $getBlocks().find('select').each(function() {
            values.push($(this).val());
        });

        return values;
    }

    function updateButtons()
    {
        $('#addmore')[$getBlocks().length < nrOfOptions ? 'show' : 'hide']();
    }
});
于 2013-05-17T04:11:09.170 回答