我如何使用 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>
我有一个下拉 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>