javascript - 在 DDL 中查找 optgroup 的值

Question

我有一个由此创建的下拉列表:

C#:

---

public static List<SelectListItem> lstDailySumAssignments()
{
    List<SelectListItem> lstAssignments = new List<SelectListItem>();

    using(var context = new AviationLogsEntities())
    {
        List<codeAC> lstActivity = context.codeAC.Where(x => x.deleted == false).ToList();

        List<string> lstCategories = new List<string>() { "STH", "NT", "STHLVGMA", "CS",
                                                              "S&R", "R", "S", "P", "D", "T", "P", "REFUSAL", "SERVICE & TESTING", "SE", "E",
                                                              "AG", "P", "P", "DA", "HTH",
                                                              };

        List<string> lstTraining = new List<string>() { "SEH", "MEH", "SEA", "IT", "HT", "ELT",
                                                            "TO", "CSEH", "CMEH", "CSEA" };

        var groups = lstActivity.OrderBy(x => x.codeAC.Text).ThenBy(x => lstTraining.IndexOf(x.text)).ThenBy(x => x.text).GroupBy(x => x.codeAC.Text).OrderBy(g => lstCategories.IndexOf(g.Key));
        foreach(var group in groups)
        {
            var slg = new SelectListGroup() { Name = group.Key };

            foreach(codeAC activity in group)
            {
                SelectListItem item = new SelectListItem() { Text = activity.text, Value = activity.ID.ToString(), Group = slg };
                lstAssignments.Add(item);
            }
        }

    }

    return lstAssignments;
}

---

现在我的JavaScipt:

---

$(document).ready(function () {
    $('#activityID').change(function () {
        var selectedActivity = this.options[this.selectedIndex].parentNode.label;
        if (selectedActivity === "STH") {
            $('#EnsureTransport').show();
        }
        else if (selectedActivity !== "STH") {
            $('#EnsureTransport').hide();
        }
    });
});

---

现在这个工作完美了，但它是静态的，而不是动态的以适应用户的变化。因此，不是与文字字符串进行比较。有没有办法与组的顺序进行比较？所以自 STH是第一组，或<optgroup>因为它以 HTML 呈现，我可以与之比较吗？

作为我试图解释的例子，我试过这个:

$(document).ready(function () {
    $('#activityID').change(function () {
        var selectedActivity = this.options[this.selectedIndex].parentNode.value;
        if (selectedActivity === 1) {
            $('#EnsureTransport').show();
        }
        else if (selectedActivity !== 1) {
            $('#EnsureTransport').hide();
        }
    });
});

但这行不通。

感谢任何帮助。

Answer 1

所以，如果我是正确的，你想获得 <optgroup> 的索引(顺序)在你的<select>对于选定的 <option> .

给定一个基本的 HTML 示例，例如:

<select id="activityID">
  <optgroup label="STH">
    <option value="1">Activity 1</option>
    <option value="2">Activity 2</option>
  </optgroup>
  <optgroup label="OTHER">
    <option value="3">Activity 3</option>
    <option value="4">Activity 4</option>
  </optgroup>
  <optgroup label="ANOTHER">
    <option value="5">Activity 5</option>
    <option value="6">Activity 6</option>
  </optgroup>
</select>

您可以使用以下 jQuery 代码:

$(document).ready(function () {
  $('#activityID').change(function () {
    var selected = $("option:selected", this);
    var groupIndex = selected.parent().index();

    console.log(groupIndex);
  });
});

输出将是:

Activity 1 -> 0

Activity 2 -> 0

Activity 3 -> 1

Activity 4 -> 1

Activity 5 -> 2

Activity 6 -> 2

因此在您的示例中，可以使用:

$(document).ready(function () {
  $('#activityID').change(function () {
    var selected = $("option:selected", this);
    var selectedActivity = selected.parent().index();

    if (selectedActivity === 0) {
      $('#EnsureTransport').show();
    }
    else if (selectedActivity !== 0) {
      $('#EnsureTransport').hide();
    }
  });
});

请注意，索引从 0 而不是 1 开始。