不应在同一表格行的两个下拉列表中选择相同的值

Question

在表格中，我在两列中有下拉列表。 我正在进行客户端验证，我应该显示弹出消息 如果用户从下拉列表中选择同一行中的“选择产品1”和“选择产品2”列中的相同值。

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

在演示链接中，当用户为 PID 100 的“Select Product1”和“Select Product2”列选择笔记本电脑和笔记本电脑时， 它按预期显示带有消息的弹出窗口，但是下次当用户在其他行中选择其他值时仍然 它正在显示弹出窗口。

注意：如果用户在 Select Product1 和 Select Product2 列中选择相同的产品，我的要求是 每一行(PID) 应显示一个弹出对话框，并显示消息“两个下拉列表中的产品名称不能相同..”

//populate dropdown with the value
  function populateSelect(ids) {
     var ids = [{"pid":"laptop","des":"laptop"},{"pid":"Mobile","des":"Mobile"},{"pid":"IPAD mini.","des":"IPAD mini."}]
      var productDropdown1 = $(".product1");
      var productDropdown2 = $(".product2");
      $.each(ids, function(index,value) {
      $("<option />").text(value.des).val(value.pid).appendTo(productDropdown1);
        $("<option />").text(value.des).val(value.pid).appendTo(productDropdown2);
      });
    
    //onchange of the dropdown list 
     $("select").change(function()
     { 
       //var optionSelected = $("option:selected", this);
       //var valueSelected = this.value;
        var selectedText = $(this).val();
        console.log("selectedText " + selectedText);
        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 cannot be same..');
                 }
      });
}
 
$(document).ready(function(){
    populateSelect(); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
    <tr>
        <td>200</td>
        <td>
            <select class="product1" >
                <option value=""></option>
            </select>
        </td>
        <td>
            <select class="product2" >
                <option value=""></option>
            </select>
        </td>
    </tr>
    <tr>
        <td>300</td>
        <td>
            <select class="product1" >
                <option value=""></option>
            </select>
        </td>
        <td>
            <select class="product2" >
                <option value=""></option>
            </select>
        </td>
    </tr>
    <tr>
        <td>400</td>
        <td>
            <select class="product1" >
                <option value=""></option>
            </select>
        </td>
        <td>
            <select class="product2" >
                <option value=""></option>
            </select>
        </td>
    </tr>
    </tbody>
</table>

Answer 1

使用以下代码时，它按预期工作：

 var row = $(this).closest("tr");
 var product1_drop = $('.product1',row).val(); // Get selected value of product1 dropdown
 var product2_drop = $('.product2',row).val();