動的な複数のドロップダウンを持つドロップダウンの検証

Question

質問： 2つのドロップダウンで同じオプションを選択できません。

動的に複数のドロップダウンが作成されます。その動的idは私のjqueryバリデーションには使用できません。 したがって、クラスを使用して検証を行ってみました。 しかし、正しいjqueryコードを書くことができません。 私を助けてください。

Answer 1

使用するjavascriptセット。以下https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

実行スニペットは、両方のドロップダウンで同じ値を選択し、あなたはそれがドロップダウンの変化に行われるべきで検証エラー

$(document).ready(function() { 
 

 

 
    var arr = [{ 
 
    val: 1, 
 
    text: 'One' 
 
    }, { 
 
    val: 2, 
 
    text: 'Two' 
 
    }, { 
 
    val: 3, 
 
    text: 'Three' 
 
    }, { 
 
    val: 4, 
 
    text: 'Four' 
 
    }, { 
 
    val: 5, 
 
    text: 'Five' 
 
    }, { 
 
    val: 6, 
 
    text: 'Six' 
 
    }]; 
 

 
    var sel = $('<select>').appendTo('#container'); 
 
    var sel2 = $('<select>').appendTo('#container'); 
 
    $(arr).each(function() { 
 
    sel.append($("<option>").attr('value', this.val).text(this.text)); 
 
    sel2.append($("<option>").attr('value', this.val).text(this.text)); 
 
    }); 
 

 
    $('select').change(function(event) { 
 
    var myArray = []; 
 
    $("select").each(function() { 
 
     myArray.push($(this).val()) 
 
    }) 
 
    if (myArray.length != new Set(myArray).size) { 
 
     alert('validation failed'); 
 
    } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="container"> 
 
</div>