메뉴 건너뛰기

조회 수 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. 비활성화 된 라디오버튼 클릭 시 경고창 생성

    Date2018.11.07 Views1396
    Read More
  2. 3D Perspective Carousel with jQuery and CSS3 - CSSSlider

    Date2018.11.07 Views1388
    Read More
  3. selectbox multiple 선택한 값들 submit 해서 받기

    Date2021.03.26 Views1368
    Read More
  4. jQuery 기초 (Postcodify - 도로명주소 우편번호 검색 프로그램 (코딩 예제) (HTML) / POP UP 버젼)

    Date2019.01.16 Views1349
    Read More
  5. jQuery 로 탭메뉴 보였다 안보였다 맹글기

    Date2019.01.10 Views1329
    Read More
  6. jQuery 기초 (jQuery 달력 (datepicker))

    Date2019.01.16 Views1321
    Read More
  7. Magnific popup conflict with "jquery.nicescroll"

    Date2018.11.07 Views1315
    Read More
  8. getElementsByClassName 을 IE8 이하에서 동작하게 하는 코드

    Date2018.11.07 Views1299
    Read More
  9. Hide pager if bxslider has only 1 slide

    Date2018.11.07 Views1296
    Read More
  10. 터치 디바이스 분기처리

    Date2018.11.07 Views1278
    Read More
  11. jQuery 기초 (focus, blur, toggle / mouseenter, mouseleave, mousedown, mouseup, hover)

    Date2019.01.16 Views1268
    Read More
  12. popModal jQuery Plugin Examples / 무료 jQuery 팝업 플러그인

    Date2019.01.16 Views1235
    Read More
  13. jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2

    Date2019.01.10 Views1211
    Read More
  14. jQuery 기초 (style.css <link> 로 추가하기 / 버튼 클릭시 데이터 삽입)

    Date2019.01.16 Views1181
    Read More
  15. [jQuery] 라디오(radio) 버튼, 체크박스(checkbox) 선택/해제 하는 방법

    Date2019.03.05 Views1129
    Read More
  16. attr() - style의 특정 속성만 바꾸기

    Date2021.03.26 Views1125
    Read More
  17. jQuery 기초 (attr()로 두가지 동시에 접근 / 변경)

    Date2019.01.16 Views1119
    Read More
  18. jQuery Plugin : Slider

    Date2019.01.10 Views1113
    Read More
  19. jQuery를 이용한 스크롤 따라니는 배너를 쉽게 맨들기(scroll follow)

    Date2019.01.10 Views1093
    Read More
  20. jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제

    Date2019.01.10 Views1085
    Read More
Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved