如何為 select_tag 注冊 onblur 掛鈎？

Question

目前我有這個，一個多 select 標簽，每次選擇/取消選擇時都會調用 function。 但是我希望在用戶點擊下拉 select_tag 時調用 function，有什么想法嗎？

<%= select_tag... :onchange => 'handleChange()' %>

Answer 1

有幾種方法。

實現這一點的最佳方法是使用一些不顯眼的 JavaScript。 像這樣添加一個事件監聽器：

  # <%= select_tag 'state' ... ' %> =>

  <select name="state" id="state" multiple>
    <option value="MN">Minnesota</option>
    <option value="IA">Iowa</option>
    <option value="WI">Wisconsin</option>
    <option value="SD">South Dakota</option>
  </select>
  
  <script>
    let element = document.getElementById('state');
    element.addEventListener('blur', event => console.log("blur, baby, blur"));
  </script>

如果您更喜歡使用 jQuery 並且它已經導入，您可以使用它的事件處理程序。 jQuery 版本將 go 如下所示：

$(document).on('blur', '#state', event => console.log('blur, baby, blur'));

請注意，將事件傳遞給您的 function 是可選的。 我將事件處理程序直接添加到文檔中，這意味着即使在頁面加載后將 select 元素動態添加到頁面中，它也可以工作。

如果您不動態加載元素，您也可以使用這種更經典的 jQuery 方法。

$('#element-id').on('blur', function() {
  // do stuff
}