메뉴 건너뛰기

조회 수 1406 추천 수 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>

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


  1. No Image 26Mar
    by
    2021/03/26 Views 238 

    foreach문

  2. No Image 26Mar
    by
    2021/03/26 Views 321 

    항상 최신버전으로 사용하기

  3. No Image 26Mar
    by 조쉬
    2021/03/26 Views 1406 

    selectbox multiple 선택한 값들 submit 해서 받기

  4. No Image 26Mar
    by
    2021/03/26 Views 941 

    DateTimepicker ( Timepicker + Datepicker )

  5. No Image 26Mar
    by
    2021/03/26 Views 267 

    라디오 버튼 선택값 가져오기

  6. No Image 26Mar
    by
    2021/03/26 Views 760 

    간단한 스크롤 따라 움직이는 메뉴 만들기

  7. No Image 26Mar
    by
    2021/03/26 Views 1538 

    datepicker, onclick 이벤트시에 한번에 뜨게 하기

  8. No Image 25Mar
    by
    2021/03/25 Views 428 

    Cesium에서 canvas 화면 center 지점의 좌표 취득

  9. No Image 25Mar
    by
    2021/03/25 Views 684 

    모달 띄우는 코드

  10. No Image 25Mar
    by
    2021/03/25 Views 345 

    javascript, jQuery에서 루프 돌리기 예 (for, forEach, each)

  11. No Image 25Mar
    by
    2021/03/25 Views 191 

    jQuery 사용자 정의 속성이 잘 반영되지 않은 경우

  12. No Image 25Mar
    by
    2021/03/25 Views 373 

    최초 접속시 css와 script가 로딩되지 않을때

  13. No Image 25Mar
    by
    2021/03/25 Views 452 

    ajax 동기화 처리하기

  14. No Image 25Mar
    by
    2021/03/25 Views 275 

    CSS로 요소에 대한 클릭 등 이벤트 발생을 막고 싶을 때

  15. No Image 25Mar
    by
    2021/03/25 Views 406 

    목록의 체크 선택/해제에 따라 [전체선택] 체크박스를 체크하거나 해제하기

  16. No Image 25Mar
    by
    2021/03/25 Views 13711 

    Ajax를 통해 전송된 데이터를 Controller에서 List 객체로 받기

  17. No Image 25Mar
    by
    2021/03/25 Views 225 

    radio 제어하기

  18. No Image 25Mar
    by
    2021/03/25 Views 277 

    모든 링크를 읽어들여 기존의 태그 뒤에 새창열기 태그를 추가하기 예

  19. No Image 25Mar
    by
    2021/03/25 Views 274 

    jQuery로 접속 주소(URL) 알아내기

  20. No Image 25Mar
    by
    2021/03/25 Views 269 

    jquery 사용자정의 속성의 사용

Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved