如何使用 jQuery 知道“選擇”輸入值已更改？

Question

我知道jQuery中的change事件處理與select類型的輸入相關聯。 但我想知道用戶是否在 select 元素中選擇了另一個值！ 所以我不想在用戶在選擇中選擇新元素時運行代碼，但我想知道用戶是否選擇了不同的值！ 事實上，我的表單中有兩個 select 元素，我只想在兩個 select 元素發生更改時啟動 ajax。 那么如何知道這兩個元素發生了變化呢？

Answer 1

首先，您可以使用select事件處理程序（為某些標志設置值）。 這是它的工作原理：

$('#select').change(function () {
  alert($(this).val());
});​

演示： http : //jsfiddle.net/dXmsD/

或者您可以將原始值存儲在某處然后檢查它：

$(document).ready(function () {
  var val = $('#select').val();    
  ...
  // in some event handler
  if ($('#select').val() != val) ...
  ...
});

Answer 2

您可以通過在 Javascript 文件中設置綁定來專門偵聽所選元素上的更改事件。

但這只能解決您一半的問題。 您想知道何時選擇了不同的元素。

您可以通過創建一個跟蹤變量來做到這一點，該變量在每次觸發事件時都會更新。

首先，為您的跟蹤變量指定一個永遠不會出現在下拉列表中的值。

// Hugely contrived!  Don't ship to production!
var trackSelect = "I am extremely unlikely to be present";

然后，您需要設置一個函數來處理更改事件。

像這樣簡單的事情：-

var checkChange = function() {
  // If current value different from last tracked value
  if ( trackSelect != $('#yourDD').val() )
  {
     // Do work associated with an actual change!
  }

  // Record current value in tracking variable
  trackSelect = $('#yourDD').val();
}

最后，您需要在 document.ready 中連接事件。

$(document).ready(function () {
  $('#yourDD').bind('change', function (e) { checkChange() });
});

Answer 3

您可以在某些隱藏字段中保存頁面加載時的值。

喜歡

    $(document).ready(function(){
 $('hiddenFieldId').val($('selectBoxId').val());
then on change you can grab the value of select:
});
    $('selectBoxId').change(function(){
    var valChng = $(this).val();
    // now match the value with hidden field
    if(valChng == $('hiddenFieldId').val()){ 
    }
    });

Answer 4

首先，您需要存儲所選選項的先前值，然后您應該檢查新選擇的值是否與存儲的值不同。

查看示例！

$(document).ready(function() {
    var lastValue, selectedValue;
    $('#select').change(function() {
        selectedValue = $(this).find(':selected').val();
        if(selectedValue == lastValue) {
            alert('the value is the same');
        }            
        else {
            alert('the value has changed');
            lastValue = selectedValue;
        }
    }); 
});​

Answer 5

 $("select").change(function () {
      var str = "";
      $("select option:selected").each(function () {
            str += $(this).text() + " ";
          });
      $("div").text(str);
    })
    .change();

http://docs.jquery.com/Events/change