javascript - 如何触发选择元素的点击事件？ (不变)

Question

在下面的代码中，当我改变选择时，会有一个alert。我试图使该功能类似于当我单击 option 时它会显示 alert。

$(document).ready(function() {
  $("#x").change(function() {
    alert("Haha");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="x">
  <option selected>A</option>
  <option>B</option>
  <option>C</option>
</select>

在下面的代码中，当我点击已经选择的选项时没有任何效果。例如选择了 a 然后我点击 a 是没有效果的。

$(document).ready(function() {
  $("#x").on("option", "click", function() {
    alert("Haha");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="x">
  <option selected>A</option>
  <option>B</option>
  <option>C</option>
</select>

因为我想在重新单击所选选项时触发事件。

点击选择框->下拉菜单->点击选中的选项->触发事件

谁能帮帮我？

Answer 1

"click selection box->drop menu->click selected option->trigger event"

首先不要使用alert() ，它会提示您进行额外的点击，您真的不需要在上面浪费时间。使用 console.log() .

下面的演示:

• 代表 click事件到 select#x :

$('#x').on('click',...

• 点击后会触发 focus每次点击事件^✱:

^✱ if (cnt % 2 === 0) { $(this).trigger('focus');}

• select#x也委托(delegate)给focus事件并将调用optionTrigger() :

$('#x').on('focus', optionTrigger);

• function optionTrigger()将记录选定的 <option>索引和正文:

^✱ if (cnt < 2) {...

...$(this).trigger('blur'); }

var idx = $(this)[0].selectedIndex;

var txt = $(this).find('option').eq(idx).text();

---

演示

var cnt = 1;

$("#x").on("click", function(e) {
  if (cnt % 2 === 0) {
    $(this).trigger('focus');
  }
  cnt++;
});

$('#x').on('focus', optionTrigger);

function optionTrigger(e) {
  if (cnt < 2) {
    $(this).trigger('blur');
  } else {
    var idx = $(this)[0].selectedIndex;
    var txt = $(this).find('option').eq(idx).text();
    console.log(idx + ': ' + txt);
  }
}

<select id="x">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>