javascript - addEventListener onchange 下拉选择值 Javascript

Question

我正在尝试根据下拉框选择的值运行 2 个函数。

代码:

var activities = document.getElementById("stand");
activities.addEventListener("change", function() {

  if (activities.options[activities.selectedIndex].value == "stand1") {
    var footRight = new THREE.Mesh(new THREE.BoxGeometry(.040, 0.55, 0.05), wallMaterial);
    partitionLeft.add(footRight);
    footRight.position.set(-0.12, -0.11, 2);
  } else {
    var footRight = new THREE.Mesh(new THREE.BoxGeometry(.040, 0.55, 0.05), wallMaterial);
    partitionLeft.add(footRight);
    footRight.position.set(-4.12, -8.9, 6);
  }
});

<div id="door-stand">
  <label>Select the stand type:</label>
  <select id="stand">
    <option class="stand1" value="stand1"> Stand 1 </option>
    <option class="stand2" value="stand2"> Stand 2 </option>
  </select>
</div>

问题是即使下拉列表中的值不断变化，也不会触发上述任何功能。

当下拉列表中的值发生变化时，我试图打印一些东西；但是，根本没有打印任何东西。

---

当我更改下拉列表中的值时出现控制台错误。只有在更改值时才会弹出控制台错误。这就是为什么我没有注意到。它说

wallMaterial not defined

Answer 1

如您所见，删除所有不必要的代码后，这个简单的代码片段可以按预期工作:

const activities = document.getElementById('stand');

activities.addEventListener('change', (e) => {
  console.log(`e.target.value = ${ e.target.value }`);
  console.log(`activities.options[activities.selectedIndex].value = ${ activities.options[activities.selectedIndex].value }`);
});

<select id="stand">
  <option class="stand1" value="stand1">Stand 1</option>
  <option class="stand2" value="stand2">Stand 2</option>
</select>

这意味着您的代码中可能还有其他问题:

• 也许有什么地方出错了:

  const activities = document.getElementById('stand');
  
  activities.addEventListener('change', (e) => {
    console.log('Change START');
    
    activities.nonexistentFunction();  
    
    console.log('Change END');
  });

  <select id="stand">
    <option class="stand1" value="stand1">Stand 1</option>
    <option class="stand2" value="stand2">Stand 2</option>
  </select>

• 也许您有一些其他change 监听器正在调用 Event.stopImmediatePropagation() :

  const activities = document.getElementById('stand');
  
  activities.addEventListener('change', (e) => {
    e.stopImmediatePropagation();
    
    console.log('Change 1');
  });
  
  activities.addEventListener('change', (e) => {  
    console.log('Change 2');
  });

  <select id="stand">
    <option class="stand1" value="stand1">Stand 1</option>
    <option class="stand2" value="stand2">Stand 2</option>
  </select>