我正在尝试根据下拉框选择的值运行 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
最佳答案
如您所见,删除所有不必要的代码后,这个简单的代码片段可以按预期工作:
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>
关于javascript - addEventListener onchange 下拉选择值 Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51033185/