메뉴 건너뛰기

조회 수 1369 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

HTML의 selectbox에는 multiple이라는 값이 있다.

<select name="test" id="test" multiple="multiple">
<option value=1> 1 </option>
</select>

위와같이 쓰는 방식으로 사용시에는 selectbox의 option항목들이 모두 표시되게 된다.

그리고 이 옵션을 줄경우 option항목들을 다중 선택할수 있게 된다.

하지만 다중선택한후에 submit를 하여도 넘어가는 값은 1개이다. (보통 맨 마지막 선택값이 넘어간다.)
그럴때 선택한 항목 모두의 값을 submit 해주기 위해서는 아래와 같이 selectbox의 이름을 배열로 잡아주면 된다.

<form method="post" name="multi_select" action="">
<select name="test[]" id="test" multiple="multiple">
<option value=1> 1 </option>
<option value=2> 2 </option>
<option value=3> 3 </option>
<option value=4> 4 </option>
<option value=5> 5 </option>
</select>
<input type="submit" value="다중선택넘기기">
</form>

<pre>
<?php 
print_r("$_POST"); 
?>
</pre>

위와 같은 코드를 작성후에 3,4,5를 선택하고 "다중선택넘기기"를 누르면 상단에

 
[test] => Array 
( 
	[0] => 3 
	[1] => 4 
	[2] => 5 
)

와 같이 표시가 될것이다.
배열로 모든 값들이 전부 넘어온 것이다.
그리고 해당 값은 위에서 보다시피 php에서는 $test라는 배열로 사용해서 값을 처리해주면 된다.

그리고 이 다중배열의 선택을 javascript로 할경우에는 jquery의 다음과 같은 방식을 이용하면 된다.

<select name="test[]" id="test" multiple="multiple" onChange="sel();" >
<option value=1> 1 </option>
<option value=2> 2 </option>
<option value=3> 3 </option>
<option value=4> 4 </option>
<option value=5> 5 </option>
</select>

<script language=javascript> 
function sel()
{
 for( var i=0; i<$('#test option').size(); i++)
  if( $("#test option:eq("+i+")").attr("selected") ) //선택된 값찾기
   alert($("#test option:eq("+i+")").val()); //선택된 값 출력
}
</script>

자신이 선택한 값들을 출력해주는 것이다.
응용은 알아서 하길 바란다.


List of Articles
번호 제목 날짜 조회 수
39 JS 첵박스 샘플 2019.06.04 694
38 모달 띄우는 코드 2021.03.25 657
37 jQuery - checkbox 전체 선택, 해제 기능 및 단일 체크박스가 해제되었을때 전체 선택 해제 하기 file 2021.03.09 613
36 간단한 마우스 포인터 따라 다니기 2021.03.26 594
35 jQuery - ajax xhr을 활용한 파일 업로드 진행 상태 확인하기 file 2021.03.09 586
34 jQuery - 클릭이벤트 동적 처리하기($("").click(), on('click') 차이) file 2021.03.09 580
33 SELECTBOX MULTIPLE 검색하기 2021.03.26 568
32 jQuery - radio, checkBox값 가져오기, 선택하기, 제어 등 file 2021.03.09 543
31 ajax 동기화 처리하기 2021.03.25 416
30 Cesium에서 canvas 화면 center 지점의 좌표 취득 2021.03.25 373
29 jQuery - 드래그, 리사이즈 이벤트에 따른 영역 침범 막기 file 2021.03.09 363
28 목록의 체크 선택/해제에 따라 [전체선택] 체크박스를 체크하거나 해제하기 2021.03.25 329
27 최초 접속시 css와 script가 로딩되지 않을때 2021.03.25 322
26 다중 select 2021.03.31 316
25 javascript, jQuery에서 루프 돌리기 예 (for, forEach, each) 2021.03.25 311
24 click에 따른 마우스 휠 on off 2021.03.31 303
23 jQuery - 드래그앤드롭(DragAndDrop)을 통한 파일 업로드 file 2021.03.09 291
22 fadeIn() , fadeOut() 을 이용한 간단한 자동 그림 전환 2021.03.26 285
21 항상 최신버전으로 사용하기 2021.03.26 285
20 기본 동작 막기 2021.03.25 284
Board Pagination Prev 1 ... 3 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved