如何在选择下拉之前触发函数
如何在选择下拉之前触发函数
提问于 2021-12-12 22:45:39
如果返回false，如何在选择和中止下拉之前触发一个函数？
也许是这样的：
document.querySelector('select').addEventListener('click',(e)=>{
if(check()==false)
e.target.abortdropdown();
})回答 2
Stack Overflow用户
发布于 2021-12-12 23:40:35
您可以在选择框周围放置一个容器，并将其绑定到click事件。然后检查check()函数，并根据复选框发生的情况采取行动。。
let check = () => {return false;};
const w = document.querySelector('#wrapper');
const s = w.querySelector('select');
w.addEventListener('click',(e) => {
const os = s.querySelectorAll('option');
if(check() == false){
s.setAttribute('onclick',"abortdropdown()");
console.log('check() is false');
abortdropdown(os);
} else {
console.log('check() is true');
setdropdown(os);
}
});
function abortdropdown(os) {
os.forEach((el) => {
el.classList.add('hide');
})
}
function setdropdown(os) {
os.forEach((el) => {
el.classList.remove('hide');
})
}.hide {
display:none;
}<div id="wrapper">
<select >
<option class="hide">1</option>
<option class="hide">2</option>
<option class="hide">3</option>
</select>
</div>
更新
下面是一个更好的例子。在本例中，包装器/父容器(也可以是您的身体)是通过鼠标切换触发的(load或类似的也适用)。这将检查check()函数。然后将选择框设置为禁用或删除禁用。这个应该能做你想做的。
const parent = document.getElementById('parent');
const s = parent.querySelector('select');
let check = () => {return true;};
parent.addEventListener('mouseover', (e) => {
if(check() == false){
s.setAttribute('disabled',"disabled");
console.log('check() is false');
} else {
console.log('check() is true');
s.removeAttribute('disabled')
}
});select[disabled] {pointer-events:none}<div id="parent">
<select disabled>
<option class="hide">1</option>
<option class="hide">2</option>
<option class="hide">3</option>
</select>
</div>
Stack Overflow用户
发布于 2021-12-12 23:11:25
我想你是在找这个，https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault。
那么如果内部情况应该是。
If (check==false) {
e.target.preventDefault();
}这样就停止了对事件的进一步默认处理。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70328316
复制相关文章
相似问题
腾讯云开发者
