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中并不适合我。但是，我最终使用了一种解决方法来解决这个问题，当click事件在选择框上触发时我设置了占位符类型选项。

<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();
            }
        }

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

3 个答案: