Show/hide 部分基于选项值而不使用 jQuery

Question

我需要 show/hide 不同 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>

P.S.: 我不是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';
}

Link 到 jsFiddle：https://jsfiddle.net/1jpad5x4/

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

Show/hide 部分基于选项值而不使用 jQuery

Show/hide section based on option value without using jQuery

javascript

show-hide

drop-down-menu