如何使用 jQuery 知道“选择”输入值已更改？答案

【问题标题】：How to know with jQuery that a "select" input value has been changed?如何使用 jQuery 知道“选择”输入值已更改？
【发布时间】：2012-11-07 10:58:26
【问题描述】：

我知道jQuery 中的change 事件处理与select 类型的输入相关联。但我想知道用户是否在选择元素中选择了另一个值！所以我不想在用户在选择中选择一个新元素时运行代码，但我想知道用户是否选择了不同的值！事实上，我的表单中有两个选择元素，我只想在两个选择元素发生更改时启动一个 ajax。那么如何知道这两个元素发生了变化呢？

【问题讨论】：

问题不是很清楚，能解释一下吗？

标签： javascript html events jquery

【解决方案1】：

您可以通过在 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() });
});

【讨论】：

【解决方案2】：

首先，您可以使用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) ...
  ...
});

【讨论】：

【解决方案3】：

首先您需要存储所选选项的先前值，然后您应该检查新选择的值是否与存储的值不同。

查看sample！

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

【讨论】：

真的有效吗？如果我没有错，lastValue 和 selectedValue 将永远不会相同，否则总是会被解雇。因为它发生在您的 SAMPLE 中
是的，它实际上似乎在这里工作 jsfiddle.net/P9B8u ，您会看到 select 输入的第一个和最后一个元素值在那里是相同的。如果在第一个元素处于活动状态时选择了最后一个元素，则 selectedValue 和 lastValue 将相等。

【解决方案4】：

您可以将页面加载时的值保存在某个隐藏字段中。

喜欢

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

【讨论】：

我们的项目像MVC框架一样分为“actions”、“models”、“pages”和“views”。所以....
MVC 现在是一种常见的设计模式，jQuery 代码应该在视图中，并且再次在该视图中您可以有一个隐藏字段。所以我相信它是一个非常可行的解决方案。
但是我们的视图只是一个对象的调用，它将调用代表页面的方法。很难解释 :) 在动作中构建了一个数组，用于存储要显示的元素的名称和类型！
那么你可以将默认值存储在一个JS变量中。

【解决方案5】：

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

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

【讨论】：