您的位置:

jQuery Onchange事件介绍

一、jqueryonchange事件

jQuery Onchange事件是一种常用的前端事件。当控件的值改变时,这个事件就会被触发。它常常和其它事件一起被使用,比如点击事件和键盘事件。换句话说,当用户改变了表单元素的值并提交表单时, Onchange 事件就会被触发。

下面的代码演示了一个简单的例子,当选择不同的选项时,会弹出不同的提示。注意,这里使用的是常见的select标签。

 
       
    
       <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

        
        
        <script>
            $(document).ready(function(){
                //当选择的选项改变时触发事件
                $("#select1").on('change',function(){
                    var selectValue = $(this).val();
                    if(selectValue == "value1"){
                        alert("您选择的是value1");
                    }else if(selectValue == "value2"){
                        alert("您选择的是value2");
                    }
                });
            });
        </script>
  

二、jquery onchange事件

jquery onchange事件和原生的onchange事件类似,它是在HTML元素值变更时触发的一个事件,如input文本框的值改变、选择框的值改变或属性的变化等等。当用户修改input框中的文本时,就会触发onchange事件。

下面的代码演示了一个简单的例子,当用户在input框中输入内容,并点击按钮时,将会弹出输入的内容。

  
     
    
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

    <input type="text" id="txtInput" />
    
    
    <script>
        $(document).ready(function(){
            $("#txtInput").on("change", function(){
                alert("内容发生了变化!");
            });
            
            $("#btnClick").on("click",function(){
                var text = $("#txtInput").val();
                alert(text);
            });
        });
    </script>
 

三、jquery onchange会触发2次

如果在jquery中绑定onchange事件,它会触发2次,可看如下代码,当我们在文本框中输入内容时,会发现alert弹出了两次。

  
    
    
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

    <input type="text" id="txtInput" />
    
    <script>
        $(document).ready(function(){
            $("#txtInput").on("change", function(){
                alert("内容发生了变化!");
            });
        });
    </script>
 

解决这个问题很简单,只要在处理事件时让它只运行一次即可。我们可以通过设置一个变量,初始值设为 false,只要第一次触发事件,修改变量为 true,以后再触发时跳过即可,如下所示:

  
    
    
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

    <input type="text" id="txtInput" />
    
    <script>
        $(document).ready(function(){
            var changed = false;
            $("#txtInput").on("change", function() {
                if (!changed) {
                    changed = true;
                    alert("内容发生了变化!");
                } 
            });
        });
    </script>
 

四、jquery onchange事件的用法

jquery onchange事件的用处非常广泛,它可以实现许多有趣的功能,下面举例如下:

1、根据不同的状态加载不同的数据

下面的代码演示了根据选择的选项加载不同的数据,在这里我们需要使用到select联动的方式,主要是通过ajax异步调取数据,根据不同的状态显示对应的数据。

  
    
    
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

    <script>
        function loaddata(value)
        {       
            $.ajax({
                type: "POST",
                url: "test.php",
                data:{fl:value},
                success: function(data){
                    $("#txtInput").val(data);
                }
            });
        }

        $(document).ready(function(){
            $("#select").on('change',function(){
                var selectValue = $(this).val();
                loaddata(selectValue);
            });
        });
    </script>

    

    <input type="text" id="txtInput" />
 

2、动态选取

当我们需要动态的选取选项时,jquery onchange事件可以直接用来动态选取选项。下面是代码实例,当用户选择不同的选项时,根据不同的选项值显示不同的内容。

  
    
    
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

    
   

内容1

内容2

内容3

<script> $(document).ready(function(){ $("#sel").on('change',function(){ // hide all options $('#option1,#option2,#option3').hide(); // get the selected option var selected = $('#sel option:selected').attr('id'); // show the selected option $('#' + selected.replace('opt', 'option')).show(); }); }); </script>

五、总结

在本文中,我们详细的介绍了jquery onchange事件,包括它与原生的onchange事件的区别,以及它的应用场景。希望通过本文的介绍,可以让大家更好地掌握jquery onchange事件的使用方法,并且在日常工作学习中更好地运用它。