选择选项时选择元素上的 jQuery 事件（不是 .change）

Question

寻找一个简单的事件绑定到该事件将在任何时候选择一个选项时触发，即使它是当前选择的选项。 再次选择所选选项时，jQuery 的 .change() 似乎不会触发，而只会触发其他选项（这是有道理的，因为它毕竟是一个“更改”事件）。

有没有其他东西与更改的工作方式或多或少相同，但在再次选择所选元素时也会触发？ 或者我需要对点击事件或其他事情变得草率吗​​？

Answer 1

<select id="select">
    <option value="1">1</option>
    <option value="2">2</option>
</select>

JS

 $(function(){
        $('#select option').click(function(){
        alert($(this).val());
        });
    })

Answer 2

虽然 Irfan 的解决方案看起来可行，但它在 Chrome 中对我不起作用。 但是，我最终使用了一种解决方法来解决这个问题，当点击事件在选择框上触发时，我设置了一个占位符类型选项。

<select id="dropdown">
    <option value="choose" disabled selected>Choose</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>
<script>
// When the dropdown is opened, the "choose" option is selected
    $('#dropdown').on('click', function(){
        $("#dropdown option").filter(function() {
          return $(this).val() == "choose"; 
        }).prop('selected', true);

        // On change will always fire
        $('#dropdown').on('change', doStuff);
    });

    function doStuff(){
        // Grab the selected value before click changes it
        let currentValue = $('#dropdown').val();

        alert(currentValue);

        /* Do other stuff with currentValue

           Wait until second click that selects sets value to "choose"
           when the user makes their selection, then set the selector
           back to what the user chose
        */
        setTimeout(function(){
            $("#dropdown option").filter(function() {
              return $(this).val() == order; 
            }).prop('selected', true);
        }, 100);
    }
</script>

结果是在选择器显示用户选择的内容之前稍有延迟，但更改事件总是会触发，因为活动值已更改。 这在 IE 或 FireFox 中效果不佳，但如果您可以检测到正在使用的浏览器，并将其与 Ifran 的解决方案相结合，您应该能够在所有浏览器上使用它。

Answer 3

这就是我刚刚解决类似问题的方式。 选择某些选项时需要显示其他字段。 将 onclick 放在选择上并传递选项的值。 然后只需在函数中定位您想要的特定选项。

<select onclick='myfunc($(this).val())'>
        <option value="" selected disabled hidden>pick</option>
        <option value="a">a</option>
        <option value="b">b</option>
    </select>

查询

 function myfunc(val){
            if(val == 'a'){
                $("#a").show();
                $("#b").hide();
            }
            if(val=='b'){
                $("#a").hide();
                $("#b").show();
            }
        }