如何在加载时隐藏 div？

Question

我有一个下拉列表，根据输入，应该会出现一个或多个 div。但是当页面加载时，它显示所有 divs。在我更改下拉列表中的值后它才起作用。

我试图隐藏 div，但它一直隐藏着。此外，当我将值“1”作为第一个时，它只显示加载中的所有内容。

<script>
$(document).on('change','#combobox',function(){
    var selected = $("#combobox option:selected");
    if ($("#group" + selected.val()).length > 0) {
        $("#group" + selected.val()).prevAll().show();
        $("#group" + selected.val()).nextAll().hide();
        $("#group" + selected.val()).show();
    }
    else {
        $('.container > div').hide();
    }
});
</script>

#group1 {
    background-color:green;
height: 30px;
}

#group2 {
    background-color:orange;
height: 30px;
}

#group3 {
    background-color:blue;
height: 30px;
}

#group4 {
    background-color:red;
height: 30px;
}

#group5 {
    background-color:#c23abc;
height: 30px;
}

#group6 {
    background-color:#c2da2c;
height: 30px;
}

#group7 {
    background-color:#e26ab1;
height: 30px;
}

<select id="combobox" name="select">
  <option value="all">Show all</option> 
  <option value="1">Show till div 1</option> 
  <option value="2">Show till div 2</option>
  <option value="3">Show till div 3</option>
  <option value="4">Show till div 4</option>
  <option value="5">Show till div 5</option>
  <option value="6">Show till div 6</option>
  <option value="7">Show till div 7</option>

</select>
<div class="container">
    <div id="group1"></div>
    <div id="group2"></div>
    <div id="group3"></div>
    <div id="group4"></div>
    <div id="group5"></div>
    <div id="group6"></div>
    <div id="group7"></div>
</div>

我需要 "container" 在加载时隐藏（或只显示第 1 组）并在下拉列表中选择一个值后显示。

Answer 1

您可以结合使用 CSS 和 JS。

您可以使用 display:none 或 visibility:hidden 在 CSS 中设置可见性。然后当你想显示它时，使用 JS 或 JQuery 将 CSS 设置为 display:block 或 visibility: visible，或属性 for display你需要。

What is the difference between visibility:hidden and display:none?

How to change CSS using jQuery?

Set CSS property in Javascript?

CSS 显示选项：
https://www.w3schools.com/CSSref/pr_class_display.asp

Answer 2

您可以隐藏 div 的容器，例如 .containder > div { dispaly: none; }

这里是url解决方案。

working JSBin example

Answer 3

首先，不要在 css 中为不同的 div 使用 id，你可以给每个 class 并且可以给共同的 class 高度为 30px。始终建议对 CSS 使用 classes 而不是 IDs

问题解答如下：

隐藏应用了 class 隐藏的所有 div。
从下拉列表中更改选项时获取所选选项的索引。
如果选择的索引为 0，这意味着选择的选项为 "Show All"，而不是从所有 div 中删除 class 隐藏。
如果选择了其他选项，请删除 class 'hide' 直到 div 并添加 class 'show.

工作演示Link https://jsbin.com/durelir/1/edit?html,output 其代码如下。

<!Doctype html>
  <head></head>
  <style>
    .hide {
      display: none;
    }
    .show {
      display: block;
    }
    .groupData {
      height: 30px;
    }
    .group1 {
      background-color:green;
    }
    .group2 {
    background-color:orange;
    }
    .group3 {
    background-color:blue;
    }
    .group4 {
    background-color:red;
    }
    .group5 {
    background-color:#c23abc;
    }
    .group6 {
    background-color:#c2da2c;
    }
    .group7 {
    background-color:#e26ab1;
    }
  </style>
  <body>
    <select id="combobox" name="select" onchange="handleSelectChange();">
      <option value="all">Show all</option> 
      <option value="1">Show till div 1</option> 
      <option value="2">Show till div 2</option>
      <option value="3">Show till div 3</option>
      <option value="4">Show till div 4</option>
      <option value="5">Show till div 5</option>
      <option value="6">Show till div 6</option>
      <option value="7">Show till div 7</option>
    </select>
    <div class="container">
      <div class="group1  groupData hide"></div>
      <div class="group2 groupData hide"></div>
      <div class="group3 groupData hide"></div>
      <div class="group4 groupData hide"></div>
      <div class="group5 groupData hide"></div>
      <div class="group6 groupData hide"></div>
      <div class="group7 groupData hide"></div>
    </div>
  </body>

  <script>
    function handleSelectChange() {
      const currentElement = document.getElementById('combobox');
      const showData = document.getElementsByClassName('groupData');
      const loopedItems = currentElement.selectedIndex !== 0 ? currentElement.selectedIndex : showData.length;

      for (let i=0; i < showData.length; i++) {
        showData[i].className = `group${i+1} groupData hide`;
      }

      for (let j=0; j < loopedItems; j++) {
        showData[j].className = `group${j+1} groupData show`;
      }
    }
  </script>
</html>

如何在加载时隐藏 div？

How to hide div on load?

html

jquery

hide

dropdown