在不使用jQuery的情况下显示/隐藏基于选项值的部分

Question

我需要根据下拉菜单的所选选项显示/隐藏不同的div。我已经尝试了前面门票中解释的所有解决方案。当他们使用jQuery库时，显示/隐藏操作是有效的，但它们会与其他页面元素发生冲突(例如，图像滑块和计数器栏是隐藏的(。所有其他解决方案都不起作用，尽管这张票中解释了一个解决方案(当选择选项时，我如何显示隐藏的div？(它运行良好，但只有两个值。我需要将此方法扩展到两个以上的值

我在这里写工作代码。

function showDiv(divId, element)
{
document.getElementById(divId).style.display = element.value == 1 ? 'block' : 'none';
}

#hidden_div {
display: none;
}

<select id="test" name="form_select" onchange="showDiv('hidden_div', this)">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<div id="hidden_div">This is a hidden div</div>

附言：我不是javascript专家。再次感谢。

Answer 1

我已经修改了你提到的解决方案，它似乎有效(如果我正确理解你的问题(：

HTML:

<select id="test" name="form_select" onchange="showDiv(this)">
<option value="hidden_div1">Show div 1</option>
<option value="hidden_div2">Show div 2</option>
<option value="hidden_div3">Show div 3</option>
<option value="hidden_div4">Show div 4</option>
</select>
<div id="hidden_div1">This is hidden div 1</div>
<div id="hidden_div2">This is hidden div 2</div>
<div id="hidden_div3">This is hidden div 3</div>
<div id="hidden_div4">This is hidden div 4</div>

CSS：

div[id*="hidden_div"] {
display: none;
}

javascript:

// When the page loads, make sure the already selected div is shown.
window.onload = function afterPageIsLoaded() {
showDiv();
}
function showDiv(element) {
// Create an array of all the hidden divs elements.
const hiddenDivs = [...document.querySelectorAll("div[id*='hidden_div']")];
// Loop over them and hide every one of them.
hiddenDivs.map(hiddenDiv => hiddenDiv.style.display = 'none');
// Get the selected id from the select.
const id = document.getElementById('test').value;
// Get the selected div and display it.
document.getElementById(id).style.display = 'block';
}

jsFiddle链接：https://jsfiddle.net/1jpad5x4/

如果我误解了你的问题或有什么不清楚的地方，请告诉我！