JavaScript 代码简化:根据下拉菜单值控制元素显示
这段代码使用 JavaScript 控制元素显示,根据下拉菜单选择的值来决定显示不同的元素。
hhhg.onchange = function() {
if(hhhg.value == 'saab') {
jsonList.style.display = 'none';
jsonLutl.style.display = 'block';
jsonLurl.style.display = 'none';
} else if(hhhg.value == 'opel') {
jsonList.style.display = 'none';
jsonLutl.style.display = 'none';
jsonLurl.style.display = 'block';
} else {
jsonList.style.display = 'block';
jsonLutl.style.display = 'none';
jsonLurl.style.display = 'none';
}
}
这段代码的功能是:
- 当下拉菜单
hhhg的值为'saab'时,显示jsonLutl元素,隐藏jsonList和jsonLurl元素。 - 当下拉菜单
hhhg的值为'opel'时,显示jsonLurl元素,隐藏jsonList和jsonLutl元素。 - 当下拉菜单
hhhg的值不为'saab'或'opel'时,显示jsonList元素,隐藏jsonLutl和jsonLurl元素。
这段代码可以简化如下:
hhhg.onchange = function() {
if (hhhg.value === 'saab') {
jsonLutl.style.display = 'block';
} else if (hhhg.value === 'opel') {
jsonLurl.style.display = 'block';
} else {
jsonList.style.display = 'block';
}
jsonList.style.display = hhhg.value === 'saab' || hhhg.value === 'opel' ? 'none' : 'block';
jsonLutl.style.display = hhhg.value === 'saab' ? 'block' : 'none';
jsonLurl.style.display = hhhg.value === 'opel' ? 'block' : 'none';
}
简化后的代码逻辑更清晰,代码更简洁。
注意:
hhhg是下拉菜单的 ID 或名称。jsonList,jsonLutl和jsonLurl是需要控制显示隐藏的元素的 ID 或名称。- 可以根据实际情况修改代码中的元素 ID 或名称。
原文地址: https://www.cveoy.top/t/topic/qoaR 著作权归作者所有。请勿转载和采集!