当用户选择的值与在同一行的其他列中选择的值相同时,显示带有错误消息的对话框

我有一个包含多行和多列的html表。在表的每一行中,我有两列(Product1和Product2),其中包含下拉列表,其中 用户可以从列表中选择值并提交信息。我想保持一个验证,这样如果用户选择相同的产品 在同一行的两列中,会弹出一个对话框,显示消息“Product1和Product2对于同一ID不能相同”。同样,对于其他行,当用户从列Product1和Product2中选择相同的值时,它应该显示错误消息。。

示例:当用户从Product1列中选择产品Laptop,并再次从Product2列中选择产品Laptop,或者从PID 100中选择产品Laptop时,应显示一个对话框,其中显示消息“Product1和Product2不能为同一ID相同”。

演示链接: http://plnkr.co/edit/HZZlQIiItG6b5IAeEkUq?p=preview

当用户在每行的Product1和Product2列中选择相同的产品时,不会显示带有消息的对话框。。 任何输入都会有帮助。 下面是我尝试的示例代码:

   //onchange of the dropdown list 
     $("select").change(function() 
     {  
        var product1_drop = $('.product1').val(); // Get selected value of product1 dropdown
        var product2_drop = $('.product2').val(); // Get selected value of product2 dropdown
        console.log("product1_drop " + product1_drop);
        console.log("product2_drop " + product2_drop);
           if(product1_drop == product2_drop ){       
                  alert('Product name in two drop down list cannot be same..');
                 }
      });

html代码:

<table id="productTable" border="1">
    <thead>
    <tr>
        <th>PID</th>
        <th>Select Product1</th>
        <th>Select Product2</th>
    </tr>
    </thead>
    <tbody>
      <tr>
         <td>100</td>
         <td>
                           <select class="product1" > 
                           <option value=""></option>
                    </select>
                </td>
                 <td>
                           <select class="product2" >        
                            <option value=""></option>
                    </select>
                </td>
      </tr>
     ......