Question

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

此仅在脚本位于正文中时有效。如果我将其移至头部，则无法使用。

为什么？可以通过其他方式（例如，仅使用Javascript使用2d数组）来实现同一事物吗？

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>

Answer 1

是的。它不起作用。因为当脚本在头部时。执行时，＃self1对象和＃sel2 DOM元素不在DOM上。在正文部分中时，会在DOM上创建DOM元素。使其工作的一种方法是将那些引用元素的变量引入函数内部，如下所示。

function giveSelection(selValue) {
  var sel1 = document.querySelector('#sel1');
  var sel2 = document.querySelector('#sel2');
  var options2 = sel2.querySelectorAll('option');
  sel2.innerHTML = '';
  for (var i = 0; i < options2.length; i++) {
    if (options2[i].dataset.option === selValue) {
      sel2.appendChild(options2[i]);
    }
  }
}

相信我，这不是一种有效的方法。最佳做法是在页面底部添加javascript，在页面顶部添加CSS。可以在主体部分的底部包含脚本。

Answer 2

为了从头开始使用该脚本，您需要使用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>

codepen

链接的下拉菜单

2 个答案: