使用JavaScript或jQuery，如何檢查選擇框是否與原始值匹配？

Question

想知道是否有任何方法來檢查選擇框下拉列表的值是否與頁面加載時的原始值相匹配（當使用selected = "yes"設置該值時）？

我想我可以使用PHP來創建原始值作爲JavaScript變量，並檢查它們，但有幾個選擇框，我試圖保持代碼儘可能簡潔！

Answer 1

這不太難。這將跟蹤值在頁面上每個select：

$(document).ready(function() { 
    $("select").each(function() { 
     var originalValue = $(this).val(); 

     $(this).change(function() { 
      if ($(this).val() != originalValue) 
       $(this).addClass('value-has-changed-since-page-loaded'); 
      else 
       $(this).removeClass('value-has-changed-since-page-loaded'); 
     }); 
    }); 
}); 

這將適用新的類value-has-changed-since-page-loaded（這大概你會重命名爲更相關）的任何選擇框，其值是它不同當頁面加載。

只要您有興趣知道該值已更改，就可以利用該類。

Answer 2

$(document).ready(function() { 
    var initialSelectValue = $('#yourselect').val(); 

    // call this function when you want to check the value 
    // returns true if value match, false otherwise 
    function checkSelectValue() { 
     return $('#yourselect').val() === initialSelectValue; 
    } 
}); 

PS。您應該使用selected="selected"而不是selected="yes"。

Answer 3

在頁面加載，創建按名稱索引的每個選擇框的初始值的數組：如果值已更改

var select_values = []; 

$(document).ready(function() { 
    $("select").each(function() { 
     select_values[$(this).attr('name')] = $(this).val(); 
    }); 
}); 

後，當您需要檢查：

function has_select_changed(name) { 
    return $("select[name="+name+"]").val() != select_values[name]; 
} 

Answer 4

首先，一個片段：

$('select').each( 
    function(){ 
    if(this.options[ this.selectedIndex ].getAttribute('selected') === null){ 
      alert(this.name +' has changed!') 
    } 
}); 

現在的解釋：

假設selectElement是一個<參考選擇/ > elementYou可以檢查使用被選擇的選項

selectElement.selectedIndex 

要獲取當前選中的<選項/ >元素，請使用

selectElement.options[ selectElement.selectedIndex ] 

現在，當你知道你可以找出哪些選項選擇元素如果此元素的選擇=「選擇」屬性（如源代碼，它不會改變 - 這是不一樣的。選擇DOM節點的屬性，對於當前選定的選項元素是真實的，當選擇被改變時會改變）