jquery: 多个下拉菜单的相同值没有重复的select

Question

我创建了一个表单，其中包含一个用于添加新下拉菜单的按钮 (select) "I want to validate that there is no duplicate value selected" 在提交表单之前，现在我通过以下代码完成了

jQuery方法：

$('select').on('change', function(){
$("select").not(this).find("option[value="+ $(this).val() + "]").prop('disabled', true);

});

但是现在我有两个问题：

1- 如果我删除其中一个 select，它的值在所有其他

中仍然被禁用

2- 从原始菜单开始，然后添加例如 5 个新菜单代码工作正常我的意思是在所有 6 个菜单中没有重复的值但是如果我添加一个新的（第 7 个菜单）我可以 select 任何值，即使它 select 由前 6 个菜单

有帮助吗？

更新：

这是 JSFiddle 的 link：

https://jsfiddle.net/Somayah/oetx6f6c/

Answer 1

我能够像这样工作：DEMO

var disabled = [];
var disableOptions = function () {
  //console.log(disabled);
    $('option').prop('disabled', false);
    $.each(disabled, function(key, val){
        $('option[value="' + val + '"]').prop('disabled', true);
    });
};

$('.moreAttendence').click(function () {
    var box_html = $('select:first').clone();
    $('.more-box').append('<br />');
    $('.more-box').append(box_html);
    box_html.fadeIn('slow');

    disableOptions();
});

$(document).on('change', 'select', function () {
    disabled = [];
    $('select').each(function(){
        if($(this).val() != 'none'){
            $('option').prop('disabled', false);
            disabled.push( $(this).val() );
        }
    });
    disableOptions();
});

希望对您有所帮助！如果您还有其他问题，请告诉我。

jquery: 多个下拉菜单的相同值没有重复的select

jquery: No duplicate select of the same value of many drop down menus

validation

jquery