jQuery Mobile 다이얼로그 select — multiple, data-native-menu 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile 다이얼로그 select —
multiple · data-native-menu="false"

복수 선택을 위한 커스텀 풀스크린 메뉴

시작 오늘 분석할 코드

일반 select 메뉴를 jQM이 큰 모바일 친화 다이얼로그로 변환하는 패턴이다. multiple로 복수 선택 가능하고, data-native-menu="false"로 OS의 기본 메뉴 대신 jQM 커스텀 UI를 띄운다.

<div data-role="fieldcontain"> <label for="age1">정보습득매체</label> <select name="age1" id="age1" data-native-menu="false" multiple="multiple"> <option value=" " data-placeholder="true">선택하세요(복수 선택 가능)</option> <option value="num1">신문</option> <option value="num2">인터넷</option> <option value="num3">SNS</option> <option value="num4">지인소개</option> <option value="num5">방송</option> </select> </div>

실제 출력 미리보기 (메뉴 열림 상태)

header 영역

정보습득매체

인터넷, SNS

정보습득매체✕

선택하세요(복수 선택 가능)

신문

인터넷

SNS

지인소개

방송

footer 영역

---

용어 핵심 키워드

multiple복수 선택 허용 — 여러 option 동시 체크

data-native-menufalse면 jQM 커스텀 다이얼로그, true면 OS 메뉴

data-placeholder"이걸 선택하세요"라고 보여줄 안내 옵션 표시

option value서버로 전송되는 실제 값

---

1 multiple — 복수 선택

일반 select는 한 번에 한 개만 선택된다. multiple="multiple"(또는 그냥 multiple)을 추가하면 여러 개를 동시에 선택할 수 있다.

서버에는 선택된 값들이 같은 name으로 여러 번 전송된다 — 예: age1=num2&age1=num3. PHP의 경우 name="age1[]"로 받아 배열로 처리한다.

⚠ 본 코드의 name — name="age1"로 되어 있다. PHP에서 받으려면 name="age1[]"로 고치는 게 좋다. 그래야 여러 값을 배열로 받을 수 있다.

---

2 data-native-menu="false" — 왜?

모바일에서 select를 누르면 보통 OS가 제공하는 작은 메뉴가 뜬다. 안드로이드/iOS마다 모양이 다르고 디자인 통제가 안 된다.

data-native-menu="false"는 OS 메뉴를 끄고 jQM이 만든 큰 풀스크린 다이얼로그를 띄우게 한다. 그러면:

• 모든 OS에서 똑같은 모양 — 디자인 일관성
• option 항목이 큰 버튼처럼 보여서 터치 쉬움
• multiple 선택 시 체크 표시가 명확

💡 true와 false 비교 — true는 빠르고 OS 친화적, false는 디자인 일관성 + 복수 선택 UX가 좋다. multiple과 짝지어 쓰는 경우 거의 항상 false.

---

3 data-placeholder="true" — 안내 옵션

첫 번째 option이 data-placeholder="true"인 경우, jQM은 그것을 "선택하세요" 안내 텍스트로 다룬다. 사용자가 실제로 선택할 수 있는 항목이 아니다.

placeholder의 value=" "(공백 한 칸)도 의도적이다. 빈 값과 다른 의미로 "선택 안 함"을 표현하기 위해서다.

---

 

반응형

 

4 4가지 변형 비교

속성 조합	UI	선택
(기본) single + native-menu true	OS 작은 드롭다운	한 개
(기본) single + native-menu false	jQM 커스텀 작은 메뉴	한 개
multiple + native-menu true	OS 멀티 메뉴 (운영체제마다 다름)	여러 개
multiple + native-menu false (본 코드)	jQM 풀스크린 다이얼로그	여러 개

---

5 자주 하는 실수

실수	증상	해결
multiple만 쓰고 native-menu=false 빠짐	OS마다 다르게 보이고 UX 나쁨	둘을 짝지어 사용
name="age1" 그대로 PHP 수신	마지막 값 하나만 받음	name="age1[]"로 배열 수신
placeholder option에 value=""	빈 문자열 전송 — 검증 까다로움	value=" " 또는 무시 처리

---

6 현대식 대안

오늘날에는 표준 <select multiple>이 모바일에서 잘 작동한다. 하지만 디자인 커스터마이징이 필요하면 Choices.js, Select2, Tom Select 같은 라이브러리가 jQM 다이얼로그를 대체한다. React 환경에서는 react-select가 표준이다.

---

핵심 한 줄 요약

multiple여러 option 동시 선택

data-native-menu="false"OS 메뉴 대신 jQM 커스텀 다이얼로그

data-placeholder="true"첫 옵션을 안내 텍스트로

PHP 수신name="age1[]"로 배열 처리

Tags

#jQuery-Mobile #select #multiple #data-native-menu #data-placeholder #dialog #다이얼로그선택 #다중선택 #PHP배열 #모바일웹 #jQuery #CSS #HTML #웹개발 #티스토리

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

jQuery-Mobile, select, multiple, data-native-menu, data-placeholder, dialog, 다이얼로그선택, 다중선택, PHP배열, 모바일웹, jQuery, CSS, HTML, 웹개발, 티스토리