jQuery Onchange事件介紹

一、jqueryonchange事件

jQuery Onchange事件是一種常用的前端事件。當控件的值改變時，這個事件就會被觸發。它常常和其它事件一起被使用，比如點擊事件和鍵盤事件。換句話說，當用戶改變了表單元素的值並提交表單時， Onchange 事件就會被觸發。

下面的代碼演示了一個簡單的例子，當選擇不同的選項時，會彈出不同的提示。注意，這裡使用的是常見的select標籤。

 
        
            p{
                font-size:24px;
                margin: 10px 0;
            }
        
    
       <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

        
            value1
            value2
        
        
        <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框中輸入內容，並點擊按鈕時，將會彈出輸入的內容。

  
      
        p{
            font-size:24px;
            margin: 10px 0;
        }
    
    
    <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彈出了兩次。

  
     
        p{
            font-size:24px;
            margin: 10px 0;
        }
    
    
    <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，以後再觸發時跳過即可，如下所示：

  
     
        p{
            font-size:24px;
            margin: 10px 0;
        }
    
    
    <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異步調取數據，根據不同的狀態顯示對應的數據。

  
     
        p{
            font-size:24px;
            margin: 10px 0;
        }
    
    
    <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>

    
        value1
        value2
    

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

2、動態選取

當我們需要動態的選取選項時，jquery onchange事件可以直接用來動態選取選項。下面是代碼實例，當用戶選擇不同的選項時，根據不同的選項值顯示不同的內容。

 p{
 font-size:24px;
 margin: 10px 0;
 }
 <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
內容1
內容2
內容3
原創文章，作者：EWEHQ，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/370837.html