Question

我有一个包含多个项目的下拉列表。为了响应用户的选择，我添加了以下“概念验证”代码：

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

但这不仅不起作用（我在选择“损害付款”选项时看不到警报），但阻止其他以前工作的代码工作。我的假设是可以通过“val（）”错误访问所选值吗？还是......

Answer 1

尝试使用$(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 2

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

顺便说一句，你应该给所有这些元素一个共同的类，而不是使用ID选择器[id$=ddlPayToIndividual]。 class="ddlPayToIndividual"。然后，您可以使用选择器.ddlPayToIndividual。 E.g。

<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 3

问题是我得到了＆＃34; val＆＃34;并且显示的值混淆了。由于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中的选定项？

3 个答案: