如何使用 jQuery 响应 DropDownList 中的选定项目？

Question

我有一个包含多个项目的下拉列表。为了响应用户所做的选择，我添加了以下 "proof-of-concept" 代码：

$(document).on("change", '[id$=ddlPayToIndividual]', function () {
    var $individualSel = $('[id$="ddlPayToIndividual"]').val();
    if ($individualSel == "Damage Payment" {
        alert("you selected Damage Payment");
    }
});

但这不仅不起作用（选择 "Damage Payment" 选项时我没有看到任何警告），而且会阻止其他以前工作的代码工作。我假设可以通过 "val()" 访问所选值是错误的吗？或者...

Answer 1

要访问事件的目标元素，请使用 $(this).val()。 $('[id$="ddlPayToIndividual"]').val() returns 文档中与选择器匹配的第一个元素的值，而不是触发事件的元素。

顺便说一句，不要使用 ID 选择器 [id$=ddlPayToIndividual]，您应该给所有这些元素一个公共的 class，例如class="ddlPayToIndividual"。然后就可以使用选择器.ddlPayToIndividual了。例如

<select class="ddlPayToIndividual" name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ddlPayToIndividua‌l" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_ddlPayToIndividual"‌>

Answer 2

尝试使用 $(this).val() 获取所选下拉列表的值。另外，如果您需要使用 id 选择器，只需使用 #ddlPayToIndividual

但是如果您需要在多个下拉菜单中使用它，那么正如@Barmar 建议的那样，尝试为所有下拉菜单提供 class 并使用 class 选择器而不是 id

这是我所做的。

$(document).ready(function() {

    $(document).on("change", '#ddlPayToIndividual', function() {

        var value = $(this).val();

        if (value == 'Damage Payment') {
            alert('you selected Damage Payment');
        }
    });
});

注意更改事件中的 #ddlPayToIndividual 而不是 [id$=ddlPayToIndividual]。

这是一个有效的JSFIDDLE。

Answer 3

问题是我得到的是 "val" 并且显示的值很混乱。由于 dropdownlist/select 是这样创建的：

DropDownList ddlPaymentToIndividual = new DropDownList();
ddlPaymentToIndividual.ID = "ddlPayToIndividual";
ddlPaymentToIndividual.Items.Add(new System.Web.UI.WebControls.ListItem("Select type", "0"));
ddlPaymentToIndividual.Items.Add(new System.Web.UI.WebControls.ListItem("Damage Payment", "1"));
. . .

...我不得不将 jQuery 更改为：

$(document).on("change", '[id$=ddlPayToIndividual]', function () {
    var value = $(this).val();

    if (value == '1') {
        alert('you selected Damage Payment');
    }
    else {
        alert(value);
    }
});

感谢 sushil 的回答，我才明白这一点。

如何使用 jQuery 响应 DropDownList 中的选定项目？

How can I respond to the selected item in a DropDownList using jQuery?

jquery

html-select