34

我有一个下拉列表:<asp:DropDownList id="dropdownid" runat="server" class=blah"/>

在我的 jQuery 中,我分配了这样的更改事件:

$('#dropdownid').change(function() {......});

现在,当我从下拉列表中选择不同的值时,这有效,但是假设我想再次选择相同的值。(因为我想用相同的值进行另一个调用)所以,当我再次选择它时,(不更改值)只需从下拉列表中单击所选值并再次“选择”它,就不会触发任何事件。我必须分配给它的 jquery 中是否还有另一个事件?什么是解决方法?

4

10 回答 10

28

为了扩展Vincent Ramdhanie 的建议,看看做这样的事情。本质上,您最终会得到您自己的 jQuery 函数,您可以在其他地方重复使用。

第 1 步:创建 jQuery 函数

(function($) {
    $.fn.selected = function(fn) {
        return this.each(function() {
            var clicknum = 0;
            $(this).click(function() {
                clicknum++;
                if (clicknum == 2) {
                    clicknum = 0;
                    fn(this);
                }
            });
        });
    }
})(jQuery);

第 2 步:确保引用了新创建的 jQuery 函数的文件以供使用:

<script src="Scripts/jqDropDown.js" type="text/javascript"></script>

第 3 步:使用新功能:

$('#MyDropDown').selected(function() {
    //Do Whatever...
});

原始信息
使用您当前的代码库,从 asp:DropDownList 中选择相同的值不会触发更改事件。

您可以尝试为 .blur 事件添加另一个 jQuery 函数。当控件失去焦点时会触发:

$('#dropdownid').blur(function() {......});

如果它们模糊功能对您不起作用,我会添加一个刷新按钮或其他可以触发您尝试使用的功能的影响。

于 2009-05-22T16:28:39.817 回答
16

试试这个:

$(document).ready(function(){
 var clicknum = 0;
 $("#dropdownid").click(function(){
    clicknum++;
    if(clicknum == 2){
        alert($(this).val());
        clicknum = 0;
    }
 });
});

首先,您要创建一个变量 clicknum 来跟踪点击次数,因为您不希望每次用户点击下拉框时都会触发该事件。第二次点击是用户做出的选择。

如果 click num 恰好是 2,那么这是第二次点击,因此触发事件并将 clicknum 重置为 0 以供下次使用。否则什么都不做。

于 2009-05-22T15:54:51.787 回答
7

只需将单击事件处理程序连接到封闭的选项控件而不是选择:

$('#dropdownid option').click(function() {......});

这只会在您从下拉列表中选择一个选项时触发,无论它是否更改。

于 2009-05-22T16:51:15.630 回答
3

根据API

当控件失去输入焦点并且其值在获得焦点后已被修改时,将触发 change 事件。

您可能想尝试使用 mousedown 或单击事件作为替代方法。

于 2009-05-22T15:36:37.187 回答
3

许多当前的解决方案将在很多情况下中断。任何依赖于两次检查点击计数的解决方案都将是非常善变的。

需要考虑的一些场景:

  • 如果您单击,然后关闭,然后再打开,它将同时计算点击次数和触发次数。
  • 在 Firefox 中,您可以通过单击鼠标打开菜单并拖动到所选选项,而无需抬起鼠标。
  • 如果您使用键盘敲击的任何组合,您可能会导致点击计数器不同步或完全错过更改事件。
    • Alt您可以使用+打开下拉菜单↕</kbd> (or the Spacebar in Chrome and Opera).
    • 当下拉菜单有焦点时,任何箭头键都会改变选择
    • 当下拉菜单打开时,单击TabEnter将进行选择

这是一个更全面的扩展:

查看是否选择了选项的最可靠方法是使用change事件,您可以使用 jQuery 的.change()处理程序来处理它。

唯一剩下要做的就是确定是否再次选择了原始元素。
这已经被问了很多(),在任何情况下都没有很好的答案。

最简单的做法是检查元素上是否有clickkeyup事件Chrome、IE 和 safari 似乎不支持元素上的事件,即使它们在w3c 推荐中option:selectedoption

元素内部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());
});

更新了 jsFiddle 中的示例

于 2014-04-25T15:49:34.077 回答
2

查看此解决方案:http:
//ledomoon.blogspot.com/2009/12/dropdown-selected-change-event-by.html

$(document).ready(function () {
    // select all the divs and make it invisible
    $("div.Content").css("display", "none");
    // Find all the combos inside the table or gridview
    $("#tblItems").find("select.Status").each(function () {
        // Attached function to the change event of each combo
        $(this).change(function () {
            if ($(this).val() == "test1") {
                // Change the visibility of the next div after the selected combo if the selected value = test1
                $(this).parent().find("div.Content").fadeIn("slow"); //css("display","block");
            } else {
                $(this).parent().find("div.Content").fadeOut("slow"); //.css("display","none");
            }
        });
    });
});

希望这可以帮助

于 2009-12-31T10:32:06.887 回答
0

您遇到的这个问题是由于客户端对基本选择 HTML 的处理。由于大多数客户不会标记未更改,因此您将不得不尝试不同的东西。

我可能会添加一个“刷新”按钮或类似的东西,但我是开发人员而不是设计师,所以我可能错了。:)

于 2009-05-22T15:38:54.393 回答
0

下拉列表中的选定项目反映了已经做出的选择。

我的建议是每次完成所需的操作时,将下拉菜单重置为默认值,如“选择...”。因此,如果用户需要执行两次操作 A,则下拉菜单将在每次操作后重置。

  1. 用户从下拉列表中选择操作 A。
  2. 执行操作 A 并重置下拉菜单。
  3. 用户从下拉列表中选择操作 A。
  4. 执行操作 A 并重置下拉菜单。

希望这可以帮助,

富有的

于 2009-05-22T16:44:13.003 回答
0

对我来说,以下解决方案效果很好:

$("#dropdownid select").click(function() {
  alert($("#dropdownid select option:selected").html());
});
于 2010-09-28T02:30:10.720 回答
-1

还:

$('#dropdownid select option').click(function() {
   ....
}
于 2012-08-23T11:53:01.353 回答