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

Question

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

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

在演示链接中，当用户为PID 100的“选择产品1”和“选择产品2”列选择了便携式计算机时， 它按预期显示带有消息的弹出窗口，但是下次用户在另一行中选择其他值时 它显示弹出窗口。

注意：如果用户在“选择产品1”和“选择产品2”列中选择了相同的产品，则我的要求是每行（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();