如何避免在 html-select 中选择选项后再次单击工作?

Question

我在以下代码中遇到问题;

function check(x){
//do staff here
}

<select onclick="check(this)" class="form-control">
<option value="value1">1</option>
<option value="value2">2</option>
</select>
<select onclick="check(this)" class="form-control">
<option value="value1">1</option>
<option value="value2">2</option>
</select>

当我单击选择标签时，我的函数可以工作，但在选择一个选项后，该功能再次工作。 但是我希望该功能仅在单击选择标签时起作用，而不是在再次选择其中一个选项标签时起作用。 我搜索了一下，但找不到任何解决方案。我怎样才能避免这种情况的发生？

提前谢谢。

Answer 1

使用onchange而不是onclick。

https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/change_event

<select onchange="check(this.value)" class="form-control">
<option value="value1">1</option>
<option value="value2">2</option>
</select>

Answer 2

在第一次执行时设置flag并检查标志。

var executed = {};
function check(e) {
var name = e.name;
if (!executed[e.name]) {
executed[e.name] = true;
console.log("executed", e.name);
}
}

<select name="select1" onclick="check(this)" class="form-control">
<option value="value1">1</option>
<option value="value2">2</option>
</select>
<select name="select2" onclick="check(this)" class="form-control">
<option value="value1">1</option>
<option value="value2">2</option>
</select>

Answer 3

如果你使用的是jQuery，你可以使用one((函数，因为它记录在这里

$( "select" ).one('change', function(){
//do staff here
}

<小时 />

<select class="form-control">
<option value="value1">1</option>
<option value="value2">2</option>
</select>
<select class="form-control">
<option value="value1">1</option>
<option value="value2">2</option>
</select>

Answer 4

让我们检查一下 event.stopPropagation(( 方法。