即使重新选择相同的选项，也会运行选择的更改事件

Question

基本上，我有如下所示的下拉菜单：

<select>
  <option>0</option>
  <option selected="selected">1</option>
  <option>2</option>
  <option>3</option>
</select>

我正在尝试编写一个即使您选择相同选项也会触发的函数，即即使打开下拉菜单并重新选择所选选项，我也想要它执行该函数。

Answer 1

如果您想使用鼠标进行选择，则可以使用mouseup。但是，当选择框打开时它也会触发，因此您需要跟踪它被触发的次数（偶数：选择正在打开，奇数：选择正在关闭）： ="http://jsfiddle.net/T4yUm/2/">http://jsfiddle.net/T4yUm/2/。

$("select").mouseup(function() {
    var open = $(this).data("isopen");

    if(open) {
        alert(1);
    }

    $(this).data("isopen", !open);
});

Answer 2

select 并不意味着以这种方式使用 - 在大多数情况下，您可以使用一些技巧来获得这种行为，例如跟踪 select 上的鼠标和键盘事件，但不能保证它们会继续工作，或在每个平台上工作。

我建议…

1. 在更改时将 select 重置为其默认值，并使用其他一些文本来指示“选择”哪个，或者
2. 使用 select 以外的控件。

您能更详细地描述一下最终目标吗？

Answer 3

pimvdb 的答案对我有很大帮助，但我添加了一些额外的位来处理键盘激活和远离选择的导航：

$('select').mouseup(... as in pimvdb... )
  .blur(function() {
     $(this).data('isopen', false);
  }).keyup(function(ev) {
     if (ev.keyCode == 13)
        alert(1);
  });

模糊处理程序处理在下拉列表打开时远离选择的导航，keyup 处理程序处理何时您可以使用键盘更改选择的值。其行为是，当用户单击“返回”导航离开时，才被认为最终选择了该值。如果您想要键盘有不同的行为，那应该不难做到。

Answer 4

另一种方法是使用 .blur() 事件 - http://jsfiddle.net /VKZb2/4/

Pro

无论哪种方式都会触发。

Con

仅当控件失去焦点时才会触发。

Answer 5

这是适用于所有场景的解决方案，这依赖于用户单击选项时发生的 onclick。只需添加先前选择的变量来跟踪新选择是否与先前选择相同

function App() {
  
  const componentRef = useRef(null);
  
    const selectClickHandle = (event) => {
  
      if (componentRef.current) {
        const rect = componentRef.current.getBoundingClientRect();
        const { clientX, clientY } = event;
  
        const isInComponent =
          clientX >= rect.left &&
          clientX <= rect.right &&
          clientY >= rect.top &&
          clientY <= rect.bottom;
  
        console.log(isInComponent);
        if (isInComponent == false) {
          // this gets triggered if a option is selected, regardless if 
          // new selected is same as prev or not.
          // write your logic here, 
        }
      }
    }


    return (
      <div className="App">    
      <div id="outer-container"
      >
        <select id="fruit" name="fruit"
          ref={componentRef}
          onClick={selectClickHandle}
        >
          <option value="apple" >Apple</option>
          <option value="banana">Banana</option>
          <option value="grape">Grape</option>
        </select>
      </div>
  );

}
export default App;

我还写了一篇关于它的文章，这是一个略有不同的主题，但我认为这将有助于解释。
https://medium.com/@ijlal.tanveer294/how-to-know-if-a-select-dropdown-is-open-555a304e7dda

Answer 6

我遇到了同样的问题。我刚刚向选项标签添加了一个单击事件，并更改了选择的值：

$("#select option").mouseup(function() {
    $(this).parent().val($(this).attr("value"));
    // do something.
});

注意：这在 iPhone 或 iPad 设备上不起作用。

Answer 7

尝试以下解决方案。它解决了通过鼠标单击或 Esc 键失去焦点的问题。

// whether or not dropdown is opened
var open = false;

$("#selectElement").on("click", function() {
    open = !open;
    if (!open)
    {
        console.log("option has been selected/re-selected");
    }
});

// update dropdown state upon loss of focus
$("#selectElement").on("blur", function() {
     if(open){
        open = !open;
     }
});

// update dropdown state upon Esc key of focus
$(document).keyup(function(e) {
   if (e.keyCode == 27) {
     if(open){
        open = !open;
     }
   }
});