jQuery Mobile optgroup — select 그룹화 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile optgroup —
select 옵션 그룹화 완전 정리

긴 옵션 목록을 카테고리로 묶어 보여주기

시작 오늘 분석할 코드

select 안의 option들을 optgroup으로 묶어 카테고리별로 분류한다. 또한 특정 option은 disabled로 비활성화할 수 있다. data-inline="true"로 select 위젯 너비를 컨텐츠만큼만 좁힌다.

<select name="age1" id="age1" data-inline="true"> <option value="">선택하세요</option> <optgroup label="그룹A"> <option value="num1">0~9세</option> <option value="num2">10~19세</option> <option value="num3">20~29세</option> </optgroup> <optgroup label="그룹B"> <option value="num4">30~39세</option> <option value="num5">40~49세</option> <option value="num6" disabled="disabled">50세이상</option> </optgroup> </select>

실제 출력 미리보기

header 영역

연령대

선택하세요

footer 영역

메뉴를 열었을 때

선택하세요

그룹A

0~9세

10~19세

20~29세

그룹B

30~39세

40~49세

50세이상

---

용어 핵심 키워드

optgroupoption들을 묶는 카테고리 컨테이너

label="…"optgroup의 표시 이름 — 회색 헤더로 보임

disabled선택 불가 — 회색 + 클릭 안 됨

data-inline="true"select 폭을 컨텐츠 크기로 줄임

---

1 optgroup — 왜 쓰는가

option이 많아지면 스크롤이 길어지고 분류가 어려워진다. optgroup은 option을 카테고리별로 묶어 회색 헤더(label)와 함께 보여준다.

• optgroup의 label은 표시만 되고 선택할 수 없다
• optgroup 안에 또 optgroup을 중첩할 수 없다 — 한 단계만 가능
• option이 optgroup 밖에 있어도 정상 동작 (예: "선택하세요"가 그렇다)

💡 실무 예 — 국가 선택(아시아/유럽/북미 그룹), 카테고리 메뉴(전자제품/식품/의류), 분류된 시간대(오전/오후) 등에 잘 어울린다.

---

2 disabled option — 비활성

disabled="disabled"(또는 그냥 disabled)을 option에 붙이면 그 항목은 회색으로 보이고 선택할 수 없다. 본 코드는 "50세이상"만 비활성으로 두었다.

⚙ 왜 비활성? — 메뉴에는 보이지만 일시적으로 선택 막을 때 쓴다. 예: 매진된 상품, 권한 없는 옵션, "준비 중" 항목.

---

3 data-inline="true"

기본 select 위젯은 가로 폭이 100% 늘어난다. data-inline="true"를 붙이면 컨텐츠만큼만 차지해서 "버튼 같은 작은 박스"로 보인다.

• label이 옆에 있을 때 같은 줄에 자연스럽게 들어간다
• fieldcontain 없이도 가로로 정렬되는 효과
• 한 줄에 여러 select를 나열할 수 있다

---

 

반응형

 

4 "선택하세요" 옵션의 위치

본 코드는 "선택하세요"를 optgroup 밖, 가장 위에 두었다. 이건 jQM의 자연스러운 패턴이다.

• optgroup 밖에 있어 어떤 그룹에도 속하지 않음 — "전체 안내" 의미
• value=""로 빈값 — 폼 검증으로 "선택 필수" 체크 가능
• data-placeholder 안 써도 첫 번째 option이 기본 표시

---

5 자주 하는 실수

실수	증상	해결
optgroup 안에 또 optgroup	HTML 표준 위반 — 무시됨	한 단계만 그룹화
optgroup 자체에 value	속성 무시됨 (label만 유효)	optgroup은 표시 전용
disabled option을 selected로	초기 선택 불가	disabled와 selected는 함께 X
label 누락된 optgroup	그룹 헤더 빈칸으로 보임	꼭 label="이름"으로

---

6 현대식 대안

<optgroup>은 HTML 표준이라 지금도 그대로 쓰면 된다. jQM 위젯 변환만 빠지고 OS의 기본 select 메뉴가 사용된다. 더 풍부한 검색·다중 그룹화가 필요하면 Choices.js, Select2 같은 라이브러리를 쓴다.

---

핵심 한 줄 요약

optgroupoption을 카테고리로 묶음 (한 단계)

label그룹 표시 이름 — 선택 불가

disabledoption 비활성 — 회색 + 클릭 X

data-inline="true"select 폭을 내용 크기로 축소

"선택하세요"optgroup 밖, value="" — 검증용

Tags

#jQuery-Mobile #select #optgroup #option #label #disabled #data-inline #옵션그룹화 #카테고리 #폼검증 #모바일웹 #jQuery #CSS #HTML #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

jQuery-Mobile, select, optgroup, option, label, disabled, data-inline, 옵션그룹화, 카테고리, 폼검증, 모바일웹, jQuery, CSS, HTML, 웹개발, 티스토리