文章/答案/技术大牛

发布

问克隆HTMLCollection
EN

Stack Overflow用户

提问于 2021-03-21 09:28:10

回答 1查看 408关注 0票数 0

我试图用一个主类别下拉列表和几个子类别下拉列表来创建一个表单，它将根据所选的主类别显示。每个主类别只有一个子类别下拉。因此，它是类别和子类别之间的直接匹配。我试图使用javascript来确定选择了哪个类别，然后隐藏与此无关的子类别。

我使用类名获取所有的子类别元素。然后，在尝试删除特定元素之前，将这些元素复制到一个新变量中。但是，对一个新变量(subCategoryList_h)的赋值没有发生，它的结果是未定义的。我发现变量类型是HTMLCollection，但我不知道如何克隆它或将它分配给一个新变量。

const categoryValue = document.getElementById("category-list");
const subCategoryList = document.getElementsByClassName("sub-category");

function categoryChange() {
  console.log(categoryValue.value);
  switch (categoryValue.value) {
    case "Category_1":
      let subCategoryList_h = subCategoryList;
      subCategoryList_h.item(0).parentNode.removeChild(subCategoryList_h.item(0));
      //console.log(subCategoryList_h);
      subCategoryList_h.style.display = "none";
      break;
    case "Category_2":
      let subCategoryList_h = subCategoryList;
      subCategoryList_h.item(1).parentNode.removeChild(subCategoryList_h.item(1));
      //console.log(subCategoryList_h);
      subCategoryList_h.style.display = "none";
      break;
    case "Category_3":
      let subCategoryList_h = subCategoryList;
      subCategoryList_h.item(2).parentNode.removeChild(subCategoryList_h.item(2));
      //console.log(subCategoryList_h);
      subCategoryList_h.style.display = "none";
      break;
    case "Category_4":
      let subCategoryList_h = subCategoryList;
      subCategoryList_h.item(3).parentNode.removeChild(subCategoryList_h.item(3));
      //console.log(subCategoryList_h);
      subCategoryList_h.style.display = "none";
      break;
  }
}

<!doctype html lang="en">
<html lang="en">

<head>
  <!--Required meta tags-->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!--Reset Browser StyleSheet-->
  <link rel="stylesheet" type="text/css" href="css/reset.css">
  <!--Custom CSS-->
  <link rel="stylesheet" type="text/css" href="css/header_footer.css">
  <link rel="stylesheet" type="text/css" href="css/main.css">

  <title>Form</title>
</head>

<body>
  <header>
    <h1>Form</h1>
  </header>
  <main>
    <div>
      <h1>Survey</h1>
      <form name="survey">
        <div class="category" id="category">
          <label for="category">Category:</label>
          <select name="category" id="category-list" onchange="categoryChange()" required>
            <option value="Category_1">Category 1</option>
            <option value="Category_2">Category 2</option>
            <option value="Category_3">Category 3</option>
            <option value="Category_4">Category 4</option>
          </select>
        </div>

        <div id="sub-category">
          <!-- Sub-category drop down lists -->
          <div class="sub-category" id="sub-category-1">
            <label for="sub-category">Sub Category:</label>
            <select name="sub-category">
              <option value="Sub_Category_1">Sub_Category_1</option>
              <option value="Sub_Category_2">Sub_Category_2</option>
              <option value="Sub_Category_3">Sub_Category_3</option>
              <option value="Sub_Category_4">Sub_Category_4</option>
            </select>
          </div>
          <div class="sub-category" id="sub-category-2">
            <label for="sub-category">Sub Category:</label>
            <select name="sub-category">
              <option value="Sub_Category_1">Sub_Category_1</option>
              <option value="Sub_Category_2">Sub_Category_2</option>
              <option value="Sub_Category_3">Sub_Category_3</option>
              <option value="Sub_Category_4">Sub_Category_4</option>
            </select>
          </div>
          <div class="sub-category" id="sub-category-3">
            <label for="sub-category">Sub Category:</label>
            <select name="sub-category">
              <option value="Sub_Category_1">Sub_Category_1</option>
              <option value="Sub_Category_2">Sub_Category_2</option>
              <option value="Sub_Category_3">Sub_Category_3</option>
              <option value="Sub_Category_4">Sub_Category_4</option>
            </select>
          </div>
          <div class="sub-category" id="sub-category-4">
            <label for="sub-category">Sub Category:</label>
            <select name="sub-category">
              <option value="Sub_Category_1">Sub_Category_1</option>
              <option value="Sub_Category_2">Sub_Category_2</option>
              <option value="Sub_Category_3">Sub_Category_3</option>
              <option value="Sub_Category_4">Sub_Category_4</option>
            </select>
          </div>
        </div>

      </form>
    </div>
  </main>

  <footer>
  </footer>

  <!-- JavaScript references. Do not touch -->
  <script src="scripts/survey.js" type="text/javascript"></script>
</body>

</html>

此外，如果有其他有效的方法，请告诉我。

javascript

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-03-21 09:49:14

控制台中已经出现的一些错误问题：

sections)

getElementsByClassName不能在同一个块中多次使用let声明同一个变量(即使在单独的case中，case返回一个没有style属性的HTMLCollection。

)

另外，删除那些永远不会插入的元素似乎是个坏主意。你只应该隐藏，而不是移除。目的避免代码重复，从而避免switch。

下面是你怎么做的。我没有更改HTML，但正如您所看到的，您不需要很多这些id HTML属性：

const categoryValue = document.getElementById("category-list");
const subCategoryList = document.querySelectorAll(".sub-category");

function categoryChange() {
    subCategoryList.forEach((subCategory, i) => {
        subCategory.style.display = categoryValue.selectedIndex == i ? "" : "none";
    });
}

categoryChange(); // on page load

  <main>
    <div>
      <h1>Survey</h1>
      <form name="survey">
        <div class="category" id="category">
          <label for="category">Category:</label>
          <select name="category" id="category-list" onchange="categoryChange()" required>
            <option value="Category_1">Category 1</option>
            <option value="Category_2">Category 2</option>
            <option value="Category_3">Category 3</option>
            <option value="Category_4">Category 4</option>
          </select>
        </div>

        <div id="sub-category">
          <!-- Sub-category drop down lists -->
          <div class="sub-category" id="sub-category-1">
            <label for="sub-category">Sub Category for 1:</label>
            <select name="sub-category">
              <option value="Sub_Category_1">Sub_Category_1</option>
              <option value="Sub_Category_2">Sub_Category_2</option>
              <option value="Sub_Category_3">Sub_Category_3</option>
              <option value="Sub_Category_4">Sub_Category_4</option>
            </select>
          </div>
          <div class="sub-category" id="sub-category-2">
            <label for="sub-category">Sub Category for 2:</label>
            <select name="sub-category">
              <option value="Sub_Category_1">Sub_Category_1</option>
              <option value="Sub_Category_2">Sub_Category_2</option>
              <option value="Sub_Category_3">Sub_Category_3</option>
              <option value="Sub_Category_4">Sub_Category_4</option>
            </select>
          </div>
          <div class="sub-category" id="sub-category-3">
            <label for="sub-category">Sub Category for 3:</label>
            <select name="sub-category">
              <option value="Sub_Category_1">Sub_Category_1</option>
              <option value="Sub_Category_2">Sub_Category_2</option>
              <option value="Sub_Category_3">Sub_Category_3</option>
              <option value="Sub_Category_4">Sub_Category_4</option>
            </select>
          </div>
          <div class="sub-category" id="sub-category-4">
            <label for="sub-category">Sub Category for 4:</label>
            <select name="sub-category">
              <option value="Sub_Category_1">Sub_Category_1</option>
              <option value="Sub_Category_2">Sub_Category_2</option>
              <option value="Sub_Category_3">Sub_Category_3</option>
              <option value="Sub_Category_4">Sub_Category_4</option>
            </select>
          </div>
        </div>

      </form>
    </div>
  </main>

  <footer>
  </footer>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66730711

复制

相似问题

问克隆HTMLCollection
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问克隆HTMLCollectionEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问克隆HTMLCollection
EN