JavaScript-无法检查空值

Question

我正在整理一个简单的表单验证，但在检查某些select元素中的null值时似乎遇到了问题。 我在下面的示例中缩写了选项列表...

<select class='species_select' id='species'+siteNumber+'1'>
    <option disabled selected>Select species</option>
    <option value='unknown'>unknown</option>
</select>

<select class='species_select' id='species'+siteNumber+'2'>
    <option disabled selected>Select species</option>
    <option value='unknown'>unknown</option>
</select>

<script>
$(document).on("click", "#next_to_summary", function(){

    var proceed = true;

    $(".species_select").each(function() {

        if (this.value === null){
            alert("Please select the species");
            proceed = false;
        };
});
</script>

在对此进行试验时，我发现如果我为disabled selected选项分配了一个值并进行了检查，则该代码就可以正常工作-当未更改disabled selected项时便会发出警报。 不过，我宁愿检查null。

我没有正确检查null吗？ 非常感谢。

Answer 1

您不应该使用===检查null，而是使用== 。

如MDN中的空文档页面所述 ，

在检查null或undefined时，请注意相等（==）和身份（===）运算符之间的差异 （类型转换是使用前者进行的）。

如果操作数严格相等（请参见上文） 且没有类型转换 ，则严格相等运算符（ === ）返回true。 在这种情况下，由于null是JavaScript的原始值之一，因此它并不严格等于任何其他类型的对象。

用==替换===后，您的代码将变为

    if (this.value == null) {
        alert("Please select the species");
        proceed = false;
    };

Answer 2

由于您使用的是jQuery，因此应依靠$（this）.val（）从未选择的选择表单字段中得出空结果：

 if ($(this).val() === null) {

http://api.jquery.com/val/

Answer 3

请按以下方式更改您的代码：

<select class='species_select' id='species'+siteNumber+'1'>
    <option disabled selected value="">Select species</option>
    <option value='unknown'>unknown</option>
</select>

<select class='species_select' id='species'+siteNumber+'2'>
    <option disabled selected value="">Select species</option>
    <option value='unknown'>unknown</option>
</select>

<script>
$(document).on("click", "#next_to_summary", function(){

    var proceed = true;

    $(".species_select").each(function() {

        if ($.trim(this.value) == ""){
            alert("Please select the species");
            proceed = false;
        };
});
</script>

Answer 4

if($(this).val() == null || $(this).val() == undefined)