Question

我正在使用html和jquery开发UI。我有一个具有多个列的html表，Product1和Product2列包含下拉列表。当用户在“说明”字段中输入文本时，我希望验证Product1和Product2字段。

当前使用以下代码，我正在检查用户是否在下拉列表中为每行Product1和Product2选择相同的值，以及显示弹出的对话框，提示“ Product1和Product2不能具有相同的值”。 如何在用户在“描述”字段中输入文本时调用以下逻辑，而不是在用户更改下拉列表时调用以下逻辑（ $（“ select”）...） < / p>

示例代码：

$("select").change(function() 
       {   
       var row = $(this).closest("tr");
       var product1_drop = $('.product1',row).val();
       var product2_drop = $('.product2',row).val();
       if(product1_drop == product2_drop ){       
            alert('Product1 and Product2 cannot have same value');
      }
   });

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

-编辑-

注意：用户可以按任意顺序在字段中输入值，但我想验证“说明”字段中是否有文本。例如，用户可以在Product1中选择值，然后输入OrderID和描述然后在Product2中选择值，因此现在它在描述字段中具有值，因此必须检查条件。如果用户未在描述字段中输入任何内容，则不应检查条件。

Answer 1

您可以收听“ input”事件：

$("#productTable input[name=description]").on("input", function validate() {
  var row = $(this).closest("tr");
  var product1_drop = $(".product1", row).val();
  var product2_drop = $(".product2", row).val();
  if (product1_drop == product2_drop) {
    alert("Product1 and Product2 cannot have same value");
  }
});

http://plnkr.co/edit/ABFfbH0yb4MOFoJvN94v?p=preview

“更改”事件与“输入”事件之间的区别在于，当输入失去焦点时会触发“更改”，而当内容改变时会触发“输入”。

根据@ user3684675的更新进行编辑：

您可以提取“验证”函数并在描述和产品更改时调用它：

$("#productTable input[name=description]").on("input", validate);
$("#productTable select").on("change, validate);

然后在“验证”功能内检查说明是否为空：

if (!$("input[name=description", row).val()) return;

Answer 2

我为您创建了示例fiddle。作为总结，您还需要为产品和说明字段绑定输入处理程序，并为任何事件调用validate方法。

$("select").change(function() {   
         var row = $(this).closest("tr");
         var product1_drop = $('.product1',row).val();
         var product2_drop = $('.product2',row).val();
         var descValue = $('input[name="description"]').val();
                validate(product1_drop,product2_drop, descValue);
       });

        $('input[name="description"]').on('input', function(e){
          var row = $(this).closest("tr");
          var product1_drop = $('.product1',row).val();
            var product2_drop = $('.product2',row).val();
            validate(product1_drop,product2_drop, $(this).val());
        });

当用户在html表的文本字段中输入文本时，要调用哪个事件监听器

2 个答案: