时间戳

首页 > 解决方案 > 根据下拉列表和单选选择切换一组 div 的条件

javascript - 根据下拉列表和单选选择切换一组 div 的条件

问题描述

根据下拉列表和单选选择切换一组 div 的条件

我需要一种方法来根据下拉列表的选择以及是否选择了单选按钮来切换一组 div。这将是一个切换，而不是两个单独的 div 实例

下拉 = 如果 1 = 显示 div1，如果 2 = 显示 div2，如果 3 = 显示 div3，如果 4 = 显示 div4

如果选择“订阅”单选，则下拉菜单将切换 4 个不同的 div 并隐藏以前的 - Dropdown = If 1 = Show div5, If 2 = Show div6, If 3 = Show div7, If 4 = Show div8

<Select id="dropdown">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</Select>
<input type="radio" name="subscription" id="subscription" value="">

<!-- If subscription is NOT selected, dropdown toggles these -->
<div id="div1">Some content aaa</div>
<div id="div2" style="display: none">Some content bbb</div>
<div id="div3" style="display: none">Some content ccc</div>
<div id="div4" style="display: none">Some content ddd</div>

<!--If subscription IS selected, dropdown toggles these -->
<div id="div5" style="display: none">Some content fff</div>
<div id="div6" style="display: none">Some content ggg</div>
<div id="div7" style="display: none">Some content hhh</div>
<div id="div8" style="display: none">Some content iii</div>

标签： javascriptjqueryhtmlforms

解决方案

只需添加一个类来告诉组 appart

<Select id="dropdown">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</Select>
<input type="radio" name="subscription" id="subscription" value="">

<!-- If subscription is NOT selected, dropdown toggles these -->
<div><strong>NOT</strong> subscription</div>
<div id="div1" class="to-toggle not-subscription" style="display: none">1 Some content bbb</div>
<div id="div2" class="to-toggle not-subscription" style="display: none">2 Some content ccc</div>
<div id="div3" class="to-toggle not-subscription" style="display: none">3 Some content ddd</div>
<div id="div4" class="to-toggle not-subscription" style="display: none">4 Some content ddd</div>

<!--If subscription IS selected, dropdown toggles these -->
<div>Subscription</div>
<div id="div1" class="to-toggle subscription" style="display: none">1 Some content fff</div>
<div id="div2" class="to-toggle subscription" style="display: none">2 Some content ggg</div>
<div id="div3" class="to-toggle subscription" style="display: none">3 Some content hhh</div>
<div id="div4" class="to-toggle subscription" style="display: none">4 Some content iii</div>

const select = document.querySelector('#dropdown')
const subscription = document.querySelector('#subscription')

select.addEventListener('change', e => {
  // hide all divs
  const divs = document.querySelectorAll('.to-toggle')
  for(let div of divs){
    div.style.display = 'none'
  }
  // check if radio is checked, then affect desired div
  if (subscription.checked) {
    document.querySelector(`#div${e.target.value}.subscription`).style.display = 'block'
  } else {
    document.querySelector(`#div${e.target.value}.not-subscription`).style.display =
      'block'
  }
})

在此处查看演示

推荐阅读