根据选定的下拉值显示 div

Question

我有一个下拉菜单：

<select>
<option value="" selected="selected">Default</option>
<option value="a">first</option>
<option value="b">second</option>
<option value="c">third</option>
<option value="d">fourth</option>
</select>

因此，我有 1 个父 div 元素和 4 个子 div 元素

<div id="default">
  <div id="a">Random1</div>
  <div id="b">Random2</div>
  <div id="c">Random3</div>
  <div id="d">Random4</div>
</div>

所以基本上，默认情况下，选择的选项应该默认显示所有 div。当从下拉列表中选择选项时，它应该根据下拉值显示 div。 （例如：如果我选择 first 那么 Random1 应该只显示而其余的被隐藏。同样，当我选择 third 它应该只显示 Random3，仅此而已）。

我希望我很清楚。 这将是一个很大的帮助。谢谢

Answer 1

监听change事件，改变div的显示属性：

const divs = document.querySelectorAll('#default div');

document.querySelector('.select-random').addEventListener('change', () => {

  let selectedIndex = event.target.selectedIndex;  

  //if selectedIndex = 0, default is selected so all divs will be displayed, otherwise all divs will be removed
  divs.forEach(div => div.style.display = (selectedIndex === 0)? 'block':'none');
  if(selectedIndex === 0)  return;

  //the coresponding div to the selected option will be displayed
  divs[selectedIndex -1].style.display = 'block';  //-1 to componsate for the first(default) option

})

<select class='select-random'>
  <option value="" selected="selected">Default</option>
  <option value="a">first</option>
  <option value="b">second</option>
  <option value="c">third</option>
  <option value="d">fourth</option>
</select>

<div id="default">
  <div id="a">Random1</div>
  <div id="b">Random2</div>
  <div id="c">Random3</div>
  <div id="d">Random4</div>
</div>

Answer 2

这是一个没有任何外部库的解决方案。

它的工作原理是在<select> 元素上为change 事件附加一个事件侦听器，然后隐藏所有<div>s 并仅显示选定的一个。

const select = document.getElementById('select');

select.addEventListener('change', function () {
    for (let otherDiv of document.querySelectorAll('#default div')) {
        otherDiv.style.display = 'none';
    }
    
    const div = document.getElementById(this.value);
    div.style.display = 'block';
});

<div id="default">
  <div id="a">Random1</div>
  <div id="b">Random2</div>
  <div id="c">Random3</div>
  <div id="d">Random4</div>
</div>

<select id="select">
  <option value="" selected="selected">Default</option>
  <option value="a">first</option>
  <option value="b">second</option>
  <option value="c">third</option>
  <option value="d">fourth</option>
</select>

---

如果你更喜欢使用 jQuery，这里有一个例子：

$('#select').change(function () {
    $('#default div').hide();
    $('#' + $(this).val()).show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="default">
  <div id="a">Random1</div>
  <div id="b">Random2</div>
  <div id="c">Random3</div>
  <div id="d">Random4</div>
</div>

<select id="select">
  <option value="" selected="selected">Default</option>
  <option value="a">first</option>
  <option value="b">second</option>
  <option value="c">third</option>
  <option value="d">fourth</option>
</select>