首页 文章

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

提问于
浏览 次
0

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

示例：当用户从Product1列中选择产品笔记本电脑并再次从Product2列中选择产品笔记本电脑或从PID 100中选择产品笔记本电脑时，应显示一个对话框，其中显示消息“产品1和产品2对于相同的ID不能相同” .

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

当用户从下拉列表中选择一些值时，它正在调用下面显示的onchange事件函数，但是我的代码没有按预期工作 . 当用户在每行的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>
     ......
javascript jquery html json

1 回答

  • 1

    问题在于这些代码行 .

    var product1_drop = $('.product1').val();
var product2_drop = $('.product2').val();

    查询“.product1”将选择类product1的所有元素 . 然后.val（）返回第一个值 .

    我的建议是获取包含表格行 . 然后选择该行中包含product1和product2类的元素 .

    var row = $(this).closest("tr");
var product1_drop = $('.product1',row).val();
var product2_drop = $('.product2',row).val();
    回复于

相关问题