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>
자신이 선택한 값들을 출력해주는 것이다.
응용은 알아서 하길 바란다.