如何可靠地在 JavaScript 中检查表中值是否存在？

javascript

2024-03-05 23:04:05

在 JavaScript 中可靠地检查表中值是否存在

问题

在 JavaScript 中使用 jQuery 检查表中值是否存在时，可能会遇到错误，尤其是当所选值存在于表中时。本文将探讨问题根源并提供可靠的解决方案，确保在所有情况下都能准确地验证值是否存在。

问题分析

该错误源于以下原因：

索引偏移： eq() 方法的索引从 0 开始，而选项值通常从 1 开始。
单一元素获取： find() 方法返回一个 jQuery 对象数组，而 data() 方法只从第一个匹配元素中获取值。

解决方法

为了解决这个问题，我们必须调整索引并使用 each() 方法遍历所有匹配元素：

// 获取所选值
var pid = $('select[name=product]').val();

// 获取包含值的表格行
var check_value = $(table).find("tr").data('id');

// 遍历匹配元素
check_value.each(function(index, value) {
    if (value == pid) {
        alert("ID exist");
        return false; // 终止循环
    }
});

// 检查是否存在匹配项
if (!check_value.length) {
    alert("Not exist");
}

改进后的代码

应用上述修改后的代码如下：

$('select[name=product]').on('change', function(){
    var pid = $('select[name=product]').val();
    var table = $('#ListProduct');
    var check_value = $(table).find("tr").data('id');

    check_value.each(function(index, value) {
        if (value == pid) {
            alert("ID exist");
            return false; // 终止循环
        }
    });

    if (!check_value.length) {
        alert("Not exist");
    }
});