时间戳

首页 > 解决方案 > 链接的下拉菜单

javascript - 链接的下拉菜单

问题描述

我正在尝试创建 2 个下拉菜单，其中第一个列表链接到第二个列表（每次我在第一个列表中选择某些内容时，第二个列表都会更新）。我有一些有效的代码，但对我来说似乎有点混乱。

此外，这仅在脚本位于 body 时才有效。如果我将它移到头部它不起作用。

为什么？可以以其他方式实现相同的事情，例如使用 2d 数组，仅在 Javascript 上使用？

var sel1 = document.querySelector('#sel1');
var sel2 = document.querySelector('#sel2');
var options2 = sel2.querySelectorAll('option');

function giveSelection(selValue) {
  sel2.innerHTML = '';
  for (var i = 0; i < options2.length; i++) {
    if (options2[i].dataset.option === selValue) {
      sel2.appendChild(options2[i]);
    }
  }
}
giveSelection(sel1.value);
<h1><b>Title</b></h1>
<select id="sel1" onchange="giveSelection(this.value)">
  <option value="0"></option>
  <option value="a">a</option>
  <option value="b">b</option>
</select>
<select id="sel2">
  <option data-option="a">apple</option>
  <option data-option="a">airplane</option>
  <option data-option="b">banana</option>
  <option data-option="b">book</option>
</select>

标签： javascripthtml

解决方案

为了从 head 部分使用该脚本，您需要使用window.onload，它将在 DOM 准备好时触发。

在您的情况下，您可以执行以下操作：

<head>
  <script>
const load = () => {
  sel1 = document.querySelector('#sel1');
  sel2 = document.querySelector('#sel2');
  options2 = sel2.querySelectorAll('option');
  giveSelection(sel1.value);
} 
function giveSelection(selValue) {
  sel2.innerHTML = '';
  for (var i = 0; i < options2.length; i++) {
    if (options2[i].dataset.option === selValue) {
      sel2.appendChild(options2[i]);
    }
  }
}
window.onload = load; 
  </script>
</head>

密码笔

推荐阅读