选择选项值不符合if语句

Question

我有一个问题我有select option元素:

<select id="item-types__profile" name="item_type_id">
<option selected disabled style="display:none;" value="0"></option>
</select>

在页面加载时，我试图取selected value:

const typesSelect = document.getElementById('item-types__profile')
const test = typesSelect.options[typesSelect.selectedIndex].value;
console.log(test);
if (test === 0) {
console.log('reached');
document.querySelector('.item-fields').style.display = 'none';
}

控制台显示0，但没有到达if代码，也没有打印出console.log('reached')。我不明白这里到底出了什么问题?

Answer 1

三重等式===是一个严格的比较，这意味着它也比较类型。选择选项的值总是一个字符串，这里是"0"而不是0。在检查或使用双相等==之前，应将其强制转换为int。

Answer 2

您的条件测试零作为一个数字或在Javascript中被称为整数，但变量test是一个字符串。应该是:

if (test === "0")

Answer 3

• 使用"=="不是"= = =,

  const typesSelect = document.getElementById('item-types__profile')
  const test = typesSelect.options[typesSelect.selectedIndex].value;
  console.log(test);
  if (test == 0) { // here 
  console.log('reached');
  document.querySelector('.item-fields').style.display = 'none';
  }
  

Answer 4

这仅仅是因为

Value:一个字符串，表示文本字段

的值

简单地把value返回一个字符串而不是整数，这样你就可以:

if (test === "0") {
console.log('reached');
document.querySelector('.item-fields').style.display = 'none';
}

交替:

if (test == 0) {
console.log('reached');
document.querySelector('.item-fields').style.display = 'none';
}

第二个将工作，即使你得到一个字符串因为我们没有做严格的相等检查(所以0 == '0')产生真，而0 === '0'产生假