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

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

我需要根据下拉菜单的选定选项显示/隐藏不同的div。我已经尝试了先前票证中介绍的所有解决方案。当他们使用jQuery库时，可以执行show / hide操作，但是会与其他页面元素发生冲突（例如，图像滑块和计数器栏被隐藏）。尽管此票证中有一个解决方案（How can I show a hidden div when a select option is selected?），但所有其他解决方案均无效。 它很好用，但只有两个值。我需要将此方法扩展为两个以上的值。

我在这里写下工作代码。

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方面的专家。再次感谢。

解决方法

我已经修改了您提到的解决方案，并且似乎可以正常工作（如果我正确理解了您的问题）：

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/

如果我对您的问题有误解或不清楚，请告诉我！