如何在下拉列表选择上运行jquery函数

时间:2014-04-30 20:19:54

标签: javascript jquery

我有一个名为Filtername的简单下拉列表。我想从列表中选择一个值时运行一个函数。我已经尝试过了

$('#FilterName').change(function() {
         code1;
         code2;
    }

问题是只有当所选值更改时,它才有效。我想运行该功能,即使用户再次从下拉列表中选择相同的值。所以我需要在值选择时运行该功能。我试过.select / .submit函数,但它们没有用。请帮忙.....

1 个答案:

答案 0 :(得分:1)

从我对Fire event each time a DropDownList item is selected with jQuery的回答:

  

许多当前的解决方案将在很多情况下破裂。任何依赖于检查点击次数两次的解决方案都会非常易变。

     

需要考虑的一些方案:

     
      
  • 如果您点击,然后关闭,然后重新开启,则会计算点击次数和点击次数。
  •   
  • 在Firefox中,只需单击鼠标即可打开菜单并拖动到所选选项,而无需抬起鼠标。
  •   
  • 如果您使用任何键盘敲击组合,您可能会使点击计数器不同步或完全错过更改事件。      
        
    • 您可以使用 Alt + (或Chrome和Opera中的空格键)打开下拉列表。
    •   
    • 当下拉列表具有焦点时,任何箭头键都将更改选择
    •   
    • 当下拉菜单打开时,点击 Tab Enter 将进行选择
    •   
  •   

这是一个更全面的扩展:

查看是否选择了某个选项的最有效方法是使用change事件,您可以使用jQuery' .change()处理程序处理该事件。

唯一要做的就是确定是否再次选择了原始元素 在任何情况下,这都会被提出很多问题(onetwothree)。

最简单的方法是检查click元素上是否有keyupoption:selected事件但是Chrome, IE, and safari don't seem to support events on option elements ,即使它们在w3c recommendation

Select元素内部似乎是一个黑盒子。如果您在其上收听事件,您甚至无法确定事件发生的元素或列表是否已打开。

接下来最好的事情似乎是处理blur事件。这将表明用户已经专注于下拉列表(可能看到列表,也许没有),并做出了他们想要坚持原始值的决定。要继续立即处理更改,我们仍会订阅change事件。为了确保我们不会重复计算,如果更改事件被提升,我们会设置一个标记,这样我们就不会反击两次:

代码:

(function ($) {
    $.fn.selected = function (fn) {
        return this.each(function () {
            $(this).focus(function () {
                this.dataChanged = false;
            }).change(function () {
                this.dataChanged = true;
                fn(this);
            }).blur(function (e) {
                if (!this.dataChanged) {
                    fn(this);
                }
            });
        });
    };
})(jQuery);

然后这样打电话:

$("#dropdownid").selected(function (e) {
    alert('You selected ' + $(e).val());
});

Updated example in jsFiddle