Необходимо запустить событие, когда выбранное меню закрывается или скрывается (исчезает из поля зрения). К какому событию я могу привязаться, чтобы выполнить sh это?

Question

Проблема:

У меня есть следующее выпадающее меню выбора. Я могу запустить событие onChange или onBlur. Но я хочу иметь возможность инициировать событие сразу после закрытия меню и ни для чего другого. Как я могу зафиксировать это?

текущая реализация

Размытие работает, но событие не срабатывает, пока я фактически не щелкну где-нибудь, кроме поля ввода. Мне нужно, чтобы оно срабатывало, когда меню параметров исчезло из вида

$("select").on("blur", function(event) {
  let id = $(this).attr("id");
  console.log(id);
  //validate.validateInput(this);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="patient_registration-patient-province">
  <option class="trn" disabled="" selected="" value="" data-trn-key="select a province">select a province</option>
  <option value="Alberta">Alberta</option>
  <option value="British Columbia">British Columbia</option>
  <option value="Manitoba">Manitoba</option>
  <option value="New Brunswick">New Brunswick</option>
  <option value="Newfoundland">Newfoundland and Labrador</option>
  <option value="Northwest Territories">Northwest Territories</option>
  <option value="Nova Scotia">Nova Scotia</option>
  <option value="Nunavut">Nunavut</option>
  <option value="Ontario">Ontario</option>
  <option value="Prince Edward Island">Prince Edward Island</option>
  <option value="Quebec">Quebec</option>
  <option value="Saskatchewan">Saskatchewan</option>
  <option value="Yukon">Yukon</option>
</select>

Answer 1

Обновление:

$(document).click(function(event) {
  $target = $(event.target);
  
  if($("select").is(":focus") && !$target.closest('#select').length)
    console.log("click outside");
});

$("select").on("click", function(event) {
  console.log("click option");
})

//$("select").on("mouseleave", () => console.log("left"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select" class="form-control" id="patient_registration-patient-province">
  <option class="trn" disabled="" selected="" value="" data-trn-key="select a province">select a province</option>
  <option value="Alberta">Alberta</option>
  <option value="British Columbia">British Columbia</option>
  <option value="Manitoba">Manitoba</option>
  <option value="New Brunswick">New Brunswick</option>
  <option value="Newfoundland">Newfoundland and Labrador</option>
  <option value="Northwest Territories">Northwest Territories</option>
  <option value="Nova Scotia">Nova Scotia</option>
  <option value="Nunavut">Nunavut</option>
  <option value="Ontario">Ontario</option>
  <option value="Prince Edward Island">Prince Edward Island</option>
  <option value="Quebec">Quebec</option>
  <option value="Saskatchewan">Saskatchewan</option>
  <option value="Yukon">Yukon</option>
</select>

Answer 2

Поскольку вы используете jQuery, вы можете использовать библиотеку select2 https://select2.org/programmatic-control/events, которую она предлагает (для вашего случая)

select2:closing     Triggered before the dropdown is closed. This event can be prevented.
select2:close   Triggered whenever the dropdown is closed. select2:closing is fired before this and can be prevented.

Если это слишком "просто посмотрите в код, как это работает.

Answer 3

Вы можете попробовать это

$(function(){
  var closed = false;
  $("select").on("blur", function(event) {
    if(!closed){
      doOnClose($(this));
    }
  });
  $("select").on("change", function(event) {
    if(!closed){
      doOnClose($(this));
    }
  });
  $("select").on("focus", function(event) {
    closed = false;
  });

  /* do what you need to on close the dropdown menu*/
  function doOnClose(e){
    let id = $(e).attr("id");
    console.log(id);
    closed = true;
  }
})

надеюсь, что это сработает