我如何使用 javascript 中的 this.value 检查下拉列表中的特定值

how do i check for specific values from a dropdown list using this.value in javascript

我有一个下拉 select 列表,其中有大约 10 个选项与一个隐藏的 div 相关联,当使用 javascript 代码javascript 选择特定的 3 个选项中的任何一个时,应该显示这些选项=13=]

document.getElementById('item').addEventListener('change', function () {
var style = (this.value == "661056067" or this.value == "571855424") ? 
'table-row' : 'none';
document.getElementById('hidden_div').style.display = style;
});

我尝试了上面显示的代码,因为我希望 this.value 函数等于多个值,但它不起作用。那么什么是使 ot 工作的正确方法。请注意,我对 javascript 一点都不擅长。 感谢您的帮助

而不是 or 使用 ||

document.getElementById('item').addEventListener('change', function () {
    var style = (this.value == "661056067" || this.value == "571855424") ? 
    'table-row' : 'none';
    document.getElementById('hidden_div').style.display = style;
});

您也可以使用includes

document.getElementById('item').addEventListener('change', function () {
    var style = ["661056067", "571855424"].includes(this.value) ? 'table-row' : 'none';
    document.getElementById('hidden_div').style.display = style;
});

使用||运算符

var style = (this.value == "661056067" || this.value == "571855424") ?  'table-row' : 'none';

这里有一个简单的方法可以实现它。它利用了 Array.prototype.includes:

const hiddenEl = document.querySelector('#hiddenEl');
const handler = e => {
  hiddenEl.style.display = ['661056067', '571855424'].includes(e.target.value) ? 'block' : 'none';
};
document.querySelector('#selectEl').addEventListener('change', handler);
#hiddenEl {
  display: none;
  font-weight: bold;
}
<label for="pet-select">Choose a pet:</label>

<select id="selectEl">
  <option value="1">Hide hidden 1</option>
  <option value="661056067">Show hidden 1</option>
  <option value="2">Hide hidden 2</option>
  <option value="3">Hide hidden 3</option>
  <option value="571855424">Show hidden 2</option>
  <option value="4">Hide hidden 4</option>
</select>

<div id="hiddenEl"><h2>Here is the hidden div!</h2></div>