메뉴 건너뛰기

조회 수 1368 추천 수 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 11Sep
    by
    2016/09/11 Views 7179 

    [jQuery Plugin] FCKeditor 2.6.5 사용법

  2. No Image 06Oct
    by
    2016/10/06 Views 7181 

    zeroclipboard - 클립보드 복사하기(자바스크립트 클립보드 복사하기)

  3. Table을 DIV로 표현하기 (예제)

  4. No Image 26Mar
    by 조쉬
    2021/03/26 Views 1368 

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

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

    SELECTBOX MULTIPLE 검색하기

  6. No Image 21Sep
    by
    2016/09/21 Views 9065 

    select box 값 변경, 목록 변경

  7. No Image 22Dec
    by
    2016/12/22 Views 6470 

    scrolling to top

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

    radio 제어하기

  9. Query 기초 (동적 테이블 (데이터 추가 / 삭제), integrateTable(정렬(sort))

  10. No Image 31Mar
    by
    2021/03/31 Views 225 

    prepend / append - element 추가 (부모/자식 관계)

  11. No Image 21Sep
    by
    2016/09/21 Views 9202 

    POST 방식으로 인수를 전달하고 그 결과를 받아오기

  12. popModal jQuery Plugin Examples / 무료 jQuery 팝업 플러그인

  13. No Image 31Mar
    by
    2021/03/31 Views 216 

    parent of the iframe element selector

  14. Magnific popup conflict with "jquery.nicescroll"

  15. No Image 21Sep
    by
    2016/09/21 Views 6412 

    load() 메소드

  16. No Image 04Jun
    by
    2019/06/04 Views 745 

    JS 타이머 샘플

  17. No Image 04Jun
    by
    2019/06/04 Views 694 

    JS 첵박스 샘플

  18. No Image 04Jun
    by
    2019/06/04 Views 788 

    JS 날짜 자료 비교

  19. No Image 27Mar
    by
    2017/03/27 Views 8704 

    jquery를 활용한 입력폼 초기화하기

  20. jQuery를 이용한 스크롤 따라니는 배너를 쉽게 맨들기(scroll follow)

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

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved