나는이에 의해 생성되는 드롭 다운리스트가 DDL

Question

에 OPTGROUP의 값을 찾기 :

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

그래서 내가 맞으면 <select>에 <option>의 <optgroup>의 색인 (주문)을 가져오고 싶습니다. 기본 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); 
    }); 
}); 

이 출력은 다음과 같습니다

활동 1 -> 0

을

활동 2 -> 0

활동 3 -> 1

활동 4 -> 1

활동 5 -> 2

활동 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(); 
    } 
    }); 
}); 

참고 tha t 인덱스는 1에서 시작하지 않고 0에서 시작합니다.