jquery - 在文档准备好时获取选定的下拉值

Question

我想遍历我的页面并找到每个带有特定 ID 的下拉菜单。我在访问下拉列表的选项集合时没有问题，但在页面首次加载时访问默认选择值没有问题。

我有一个循环中的下拉列表：

@Html.DropDownListFor(m => m.InterviewSchedules[location.InterviewDates.IndexOf(date)].ChairId, new SelectList(ChairList, "InterviewerId", "FullDetails"), new {id = "ddlInterviewer" })

这是我在外部脚本中的 js：

 $("#InterviewManagementFrm #ddlInterviewer > option").each(function () {
        var lastChar = this.text.substr(this.text.length - 1);
        if (lastChar == 'A') {
            $(this).addClass("AcceptedPreference");
            //            this.text = this.text.slice(0, this.text.length - 1);
        }
        else if (lastChar == 'P') {
            $(this).addClass("PreferredPreference");
            //            this.text = this.text.slice(0, this.text.length - 1);
        }
    });

我想为页面上的每个下拉项添加一个类。 addClass 用于为下拉项设置不同颜色的样式。

在我的屏幕截图中，只有未选中的项目有颜色。那是因为 javascript 添加了类。我想为页面加载时默认选择的值添加一个类。

Answer 1

您可以使用:selected http://api.jquery.com/selected-selector/

$("#InterviewManagementFrm #ddlInterviewer > option").each(function () {
    var lastChar = this.text.substr(this.text.length - 1);
    if (lastChar == 'A') {
        if( $(this).is(':selected') ) {
            // add class
        } else {
            $(this).addClass("AcceptedPreference");
        }
    }
    else if (lastChar == 'P') {
        if( $(this).is(':selected') ) {
            // add class
        } else {
            $(this).addClass("PreferredPreference");
        }
    }
});

你也可以直接定位选中的

$("#InterviewManagementFrm #ddlInterviewer > option:selected")

如果#ddlInterviewer 是选择的ID，那么您不需要> 并且ID 应该是唯一的