在html-select中选择选项后，如何避免onclick再次工作？

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>

​

当我单击select标记时，我的函数可以工作，但是在选择了一个选项之后，该函数再次工作。但是，我希望该函数只在单击select标记时才能工作，而不是当再次选择选项标签时。我搜索了一下，但找不到任何解决办法。我怎样才能避免这种情况发生呢？

提前谢谢。

Answer 1

在第一次执行时设置一个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 2

使用onchange而不是onclick。

事件

<select onchange="check(this.value)" 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>