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

时间:2015-03-03 13:12:23

标签: jquery validation

我创建了一个包含按钮的表单,用于添加新的下拉菜单(选择)"我想验证没有选择重复的值"在提交表单之前,现在我通过以下代码

完成了

jQuery方法:

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

});

但现在我有两个问题:

1-如果我删除了其中一个选项,其值仍然在所有其他选项中被禁用

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

任何帮助?

更新:

以下是JSFiddle的链接:

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

1 个答案:

答案 0 :(得分: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();
});

希望这有帮助!如果您有任何其他问题,请与我们联系。