如何在应用到新添加的 <select> 和以前的 <select> 时禁用在另一个 <select> 中选择的 <option>

Question

我有这段代码，我正在使用 here，它禁用基于类似字段的选择选项。

$(document).on('shown.oc.popup', function() {


    let options = $('.variantPlacementOptions:first select').children();
    let availableOptions = $.map(options ,function(options) {
        return options;
    });


    $('.variantPlacementOptions select option').attr('disabled', false)

    console.log(availableOptions);



    // Get form and check if fields are selected, and disable if they are (on ajaxDone)
    $(document).on('ajaxDone', function (){

        $('.variantPlacementOptions select option').removeAttr('disabled')
        $('.variantPlacementOptions select').each(function() {
            var val = this.value;
            $('.variantPlacementOptions select').not(this).find('option').filter(function() {
                return this.value === val;
            }, this).attr('disabled', true);
        });
    })

    $('.variantPlacementOptions select').on('change', function() {
        $('.variantPlacementOptions select option').removeAttr('disabled')
        $('.variantPlacementOptions select').each(function() {
            var val = this.value;
            $('.variantPlacementOptions select').not(this).find('option').filter(function() {
                return this.value === val;
            }, this).attr('disabled', true);
        });
    }).change();

});

我对这段代码的问题是它不适用于新添加的选择字段。奇怪的是，我可以这样做：

$(document).on('shown.oc.popup', function() {


    let options = $('.variantPlacementOptions:first select').children();
    let availableOptions = $.map(options ,function(options) {
        return options;
    });


    // Get form and check if fields are selected, and disable if they are (on ajaxDone)
    $(document).on('ajaxDone', function (){

        $('.variantPlacementOptions select').html(availableOptions) // Add in available options before removing
        $('.variantPlacementOptions select').each(function() {
            var val = this.value;
            $('.variantPlacementOptions select').not(this).find('option').filter(function() {
                return this.value === val;
            }, this).remove; //remove item in question
        });
    });
});

但是这样做不利于用户体验，因为它会取消选择值。这也让我感到困惑，因为如果这可行，理论上，第一个选项应该可行。

关于目标的更多背景信息

• 我很想用当前的类和 jQuery 来实现这一点
• 我需要保持类不变，因为我无法完全控制 DOM 结构。我可以添加容器类，但不能直接向元素添加类或 ID。我也无法向容器类添加 ID。
• 我在 OctoberCMS v2 的后端执行此操作。

其他说明：

• This question 没有帮助，因为它没有达到我想要的效果。

我希望得到任何类型的帮助。

Answer 1

有人在 reddit (u/iluminumx) answered 我的问题。

我需要将选择的部分作为参数移动到事件处理程序。这个：

$('.variantPlacementOptions select').on('change', function() {
   
}).change();

需要这样：

$('.variantPlacementOptions').on('change', 'select', function() {
   
}).change();