Question

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

在我的jQuery中，我分配了这样的更改事件：

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

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

Answer 1

要展开 Vincent Ramdhanie's 建议，请看一下这样的事情。从本质上讲，您最终会得到自己的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 Function文件：

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

第3步：利用新功能：

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

原始信息
使用当前的代码库，从asp：DropDownList中选择相同的值不会触发change事件。

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

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

如果它们模糊功能对你不起作用，我会添加一个刷新按钮或其他东西来激发你想要使用的功能。

Answer 2

试试这个：

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

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

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

Answer 3

只需将事件处理程序点击到所附的选项控件而不是select：

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

只有从下拉列表中选择一个选项时才会触发，无论它是否发生变化。

Answer 4

根据API：

更改事件在控件时触发失去输入焦点及其值自获得关注以来已被修改。

您可能希望尝试使用mousedown或click事件作为替代方案。

Answer 5

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

需要考虑的一些方案：

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

这是一个更全面的扩展：

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

唯一要做的就是确定是否再次选择了原始元素在任何情况下，这都会被提出很多问题（one，two，three）。

最简单的方法是检查click元素上是否有keyup或option: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

Answer 6

查看此解决方案：
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");
            }
        });
    });
});

希望这有帮助

Answer 7

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

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

Answer 8

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

我建议每次完成所需操作时，将下拉菜单重置为默认值，例如“选择...”。因此，如果用户需要执行两次Action A，则每次操作后都会重置下拉列表。

用户从下拉列表中选择操作A.
执行操作A并重置下拉列表。
用户从下拉列表中选择操作A.
执行操作A并重置下拉列表。

希望这有帮助，

富

Answer 9

对我来说，以下解决方案运行良好：

$("#dropdownid select").click(function() {
  alert($("#dropdownid select option:selected").html());
});

Answer 10

此外：

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

每次使用jQuery选择DropDownList项时都会触发Fire事件

10 个答案:

需要考虑的一些方案：

这是一个更全面的扩展：

代码：

Updated example in jsFiddle