用于自定义选择的 js 在 codepen 和 jsfiddle 中有效，但在浏览器中无效？

Question

我正在处理自定义选择元素，代码在 codepen 和 jsfiddle 中按预期运行，但如果我在浏览器中运行它不会下拉。我以前从未在 web 项目中实现过 js，所以我觉得我错过了一些相当简单的东西。

这里是 codepen 的链接：https://codepen.io/kylegendy/pen/xxwYrPr

这是我输入的代码...：

script.js

for (const dropdown of document.querySelectorAll(".custom-select-wrapper")) {
  dropdown.addEventListener('click', function() {
    this.querySelector('.custom-select').classList.toggle('open');
  })
}

for (const option of document.querySelectorAll(".custom-option")) {
  option.addEventListener('click', function() {
    if (!this.classList.contains('selected')) {
      this.parentNode.querySelector('.custom-option.selected').classList.remove('selected');
      this.classList.add('selected');
      this.closest('.custom-select').querySelector('.custom-select__trigger span').textContent = this.textContent;
    }
  })
}

window.addEventListener('click', function(e) {
  for (const select of document.querySelectorAll('.custom-select')) {
    if (!select.contains(e.target)) {
      select.classList.remove('open');
    }
  }
});

function selectOption(index) {
  var optionOnIdx = document.querySelector('.custom-option:nth-child(' + index + ')');
  var optionSelected = document.querySelector('.custom-option.selected');
  if (optionOnIdx !== optionSelected) {
    optionSelected.parentNode.querySelector('.custom-option.selected').classList.remove('selected');
    optionOnIdx.classList.add('selected');
    optionOnIdx.closest('.custom-select').querySelector('.custom-select__trigger span').textContent = optionOnIdx.textContent;
  }
}


document.querySelector('button').addEventListener("click", function() {
  selectOption(2);
});

template.css

*,
*:after,
*:before {
  box-sizing: border-box;
}

.container .custom-select-wrapper {
  display: flex;
  text-align: center;
  /* centeres the text horizontally */
  width: 300px;
  border-width: thick;
  border-color: blue;
  border-style: solid;
}

custom-select-wrapper>div {
  display: inline-block;
  position: relative;
  max-width: 50%;
}

.container .selectName {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  user-select: none;
  border-width: thick;
  border-color: red;
  border-style: none solid none none;
  background-color: rgba(228, 228, 228, 0.39);
}

.custom-select-wrapper {
  position: relative;
  user-select: none;
}

.custom-select {
  display: flex;
  flex-direction: column;
  border-width: 0;
}

.custom-select-wrapper>div {
  display: inline-block;
  /* blocks just line up without floats */
  position: relative;
  /* sets positioning context for 2nd level menu */
  width: 50%;
  height: 60px;
}

.custom-select__trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  color: rgba(83, 83, 83, 1);
  line-height: 60px;
  background-color: rgba(228, 228, 228, 0.39);
  cursor: pointer;
  border-width: 0;
}

.custom-options {
  position: absolute;
  display: block;
  top: 100%;
  left: 0;
  right: 0;
  border: none;
  background: white;
  transition: all 0.5s;
  opacity: 0;
  visibility: hidden;
}

.custom-select.open .custom-options {
  opacity: 1;
  visibility: visible;
}

.custom-option {
  position: relative;
  display: block;
  padding: 0 22px 0 22px;
  color: rgba(83, 83, 83, 1);
  line-height: 60px;
  cursor: pointer;
}

.custom-option:hover {
  cursor: pointer;
  background-color: rgba(228, 228, 228, 0.39);
}

.custom-option.selected {
  color: white;
  background-color: rgb(149, 189, 204);
}

.arrow {
  position: relative;
  height: 15px;
  width: 15px;
}

.arrow::before,
.arrow::after {
  content: "";
  position: absolute;
  bottom: 0px;
  width: 0.15rem;
  height: 100%;
  transition: all 0.5s;
}

.arrow::before {
  left: -5px;
  transform: rotate(45deg);
  background-color: #394a6d;
}

.arrow::after {
  left: 5px;
  transform: rotate(-45deg);
  background-color: #394a6d;
}

.open .arrow::before {
  left: -5px;
  transform: rotate(-45deg);
}

.open .arrow::after {
  left: 5px;
  transform: rotate(45deg);
}

template.html

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

<head>
  <meta charset="UTF-8">
  <title>the wall</title>
  <link href="template.css" rel="stylesheet" type="text/css">
  <script src="script.js" type="text/javascript"></script>
</head>


<body>


  <div class="container">
    <div class="custom-select-wrapper">

      <div class="selectName"><span>Type</span></div>

      <div class="custom-select">
        <div class="custom-select__trigger"><span>Tesla</span>
          <div class="arrow"></div>
        </div>
        <div class="custom-options">
          <span class="custom-option selected" data-value="tesla">Tesla</span>
          <span class="custom-option" data-value="volvo">Volvo</span>
          <span class="custom-option" data-value="mercedes">Mercedes</span>
        </div>
      </div>

    </div>
  </div>


</body>

</html>

编辑：我删除了 jsfiddle 和 codepen 中从第 38 行开始的 js 代码段，并且下拉列表的工作方式相同，但当我在文件中删除它以在浏览器上运行时，虽然错误消失，下拉菜单仍然不起作用。

Answer 1

将您的脚本放入如下函数中

function Test(){    
    for (const dropdown of document.querySelectorAll(".custom-select-wrapper")) {
        dropdown.addEventListener('click', function () {
            this.querySelector('.custom-select').classList.toggle('open');
        })
    }

    for (const option of document.querySelectorAll(".custom-option")) {
        option.addEventListener('click', function () {
            if (!this.classList.contains('selected')) {
                this.parentNode.querySelector('.custom-option.selected').classList.remove('selected');
                this.classList.add('selected');
                this.closest('.custom-select').querySelector('.custom-select__trigger span').textContent = this.textContent;
            }
        })
    }

    window.addEventListener('click', function (e) {
        for (const select of document.querySelectorAll('.custom-select')) {
            if (!select.contains(e.target)) {
                select.classList.remove('open');
            }
        }
    });

    function selectOption(index) {
        var optionOnIdx = document.querySelector('.custom-option:nth-child('+index+')');
      var optionSelected = document.querySelector('.custom-option.selected');
      if (optionOnIdx !== optionSelected) {
        optionSelected.parentNode.querySelector('.custom-option.selected').classList.remove('selected');
                optionOnIdx.classList.add('selected');
                optionOnIdx.closest('.custom-select').querySelector('.custom-select__trigger span').textContent = optionOnIdx.textContent;
            }
    }

}

并从您的 HTML 页面调用此函数

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

<head>
  <meta charset="UTF-8">
  <title>the wall</title>
  <link href="template.css" rel="stylesheet" type="text/css">
  <script src="script.js" type="text/javascript"></script>
</head>


<body>
<div class="container">
        <div class="custom-select-wrapper">

            <div class="selectName"><span>Type</span></div>

            <div class="custom-select">
                <div class="custom-select__trigger"><span>Tesla</span>
                    <div class="arrow"></div>
                </div>
                <div class="custom-options">
                    <span class="custom-option selected" data-value="tesla">Tesla</span>
                    <span class="custom-option" data-value="volvo">Volvo</span>
                    <span class="custom-option" data-value="mercedes">Mercedes</span>
                </div>
            </div>

        </div>
</div>
<script>
Test();
</script>
</body>

</html>

并从您的 script.js 页面中删除以下代码

document.querySelector('button').addEventListener("click", function() {
  selectOption(2);
});