Javascript 根据下拉列表和收音机选择切换一组div的条件

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

我需要一种根据下拉菜单的选择切换一组div的方法 如果选择了单选按钮。这将是一个切换，而不是两个 单独的div实例

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

如果选择了“订阅”收音机，则下拉菜单将切换4个不同的div并隐藏以前的div- 下拉菜单=如果1=显示div5，如果2=显示div6，如果3=显示div7，如果4=显示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>

一
二
三
四
一些内容aaa
一些内容bbb
一些内容
部分内容ddd
一些内容fff
一些内容ggg
一些内容
部分内容三

下面是一个使用JQuery的解决方案：

$("#dropdown").on("change", toggleDivs());


function toggleDivs() {

    hideAllDivs();

    var dropdownSelected = $("#dropdown").find("option:selected").val();
    var isSubscription = $("input[name='subscription']:checked");

    switch(dropdownSelected) {

        case "1": 
            if(!isSubscription) {
                $("#div1").toggle();
            }
            else {
                $("#div5").toggle();
            }

            break;

        case "2": 
            if(!isSubscription) {
                $("#div2").toggle();
            }
            else {
                $("#div6").toggle();
            }

            break;

        case "3":
            if(!isSubscription) {
                $("#div3").toggle();
            }
            else {
                $("#div7").toggle();
            }

            break;

        case "4": 
            if(!isSubscription) {
                $("#div4").toggle();
            }
            else {
                $("#div8").toggle();
            }

            break;
    }
}


function hideAllDivs() {

    $("div").css("display", "none");
}

这里的想法是：当下拉列表更改值时，启动

toggleDivs（）

函数

---

在

toggleDivs（）

中，首先隐藏所有div以进行某种重置。然后，获取所选下拉选项的值，以及是否选中了“订阅”单选按钮。在切换情况下，您将根据需求切换适当的div。例如：如果选择的下拉列表为“1”，则显示“div1”，除非选中“订阅”单选按钮，否则显示“div5”，等等。

这使用纯JavaScript：

let displayedDiv = document.getElementById("div1");
function onChange(){
   displayedDiv.style.display = "none"

  let dropdown = document.getElementById("dropdown");
  let value = dropdown.value
  let radioCheck = 
    document.getElementById("subscription").checked;
  if(radioCheck){
      displayedDiv = document.getElementById(`div${parseInt(value) + 4}`)
  } else {
      displayedDiv = document.getElementById(`div${value}`)
  }
  displayedDiv.style.display = "block"
}

将函数附加到onchange属性，并同时附加到select元素和input元素

---

这假设您正好有八个div，否则，让div1 be dropdown=1、radio=0、div2 be dropdown=1、radio=1等更有意义。这样您就可以将值乘以2。

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

一
二
三
四
不是订阅
1部分内容bbb
2部分内容
3部分内容ddd
4部分内容ddd
订阅
1一些内容fff
2部分内容ggg
3部分内容hhh
4部分内容三

---

见演示

嗨，你试过什么了吗？不清楚你有什么问题以及你的具体问题是什么。你可以从谷歌搜索“jQuery点击事件”和“jQuery显示/隐藏元素”开始。@Nicolas是的，我尝试了前几个答案。其中一个可以工作，但没有替换，而是堆叠了div，jQuery开关选项最有意义，但没有工作（见下文）非常感谢！这真的很接近，但我需要切换div，以便一次只显示一个。因此，如果选择了下拉菜单3，则显示“3部分内容ddd”，但一旦单击收音机，它将切换到“4部分内容iii”。如果未选中收音机，它将恢复到原来的状态以实现这一点，您可以循环所有div并将它们设置为all，然后进行检查以显示理论上选择的一个div。这是有意义的，也是我正在寻找的，但它似乎不起作用。对不起，我应该提到的是，因为它使用jquery，如果您还没有将它包括在项目中的话。以下是一个工作版本（带有一些更新的语法）：

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'
  }
})