我正在尝试根据下拉框选择的值运行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未定义
发布于 2018-06-26 08:10:23
正如您所看到的,在删除所有不必要的代码后,这个简单的代码片段将按预期工作:
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活动= document.getElementById('stand');activities.addEventListener('change',(e) => { console.log('Change START');activities.nonexistentFunction();console.log('Change END');});
1号站2号站
您可能还有其他一些调用Event.stopImmediatePropagation()
的
change
侦听器常量活动= document.getElementById('stand');activities.addEventListener('change',(e) => { e.stopImmediatePropagation();console.log('Change 1');});activities.addEventListener('change',(e) => { console.log('Change 2');});
1号站2号站
发布于 2019-05-05 08:56:25
您可以使用this.value
在回调函数中访问所选选项的值:
document.getElementById('stand').onChange = function(){
console.log(this.value);
});
https://stackoverflow.com/questions/51033185
复制相似问题