다양한 값을 선택하고자 할 때 셀렉트박스와 체크박스를 쓰는데요. 두가지 모두 각자의 특성을 구현할 수 있는 jquery 멀티셀렉트 구현 방법을 알아보겠습니다.
bootstrap multiselect
멀티셀렉트박스는 이런 셀렉트박스와 체크박스를 합쳐놓은 기능인데요. 부트스트랩에서는 이런 기능을 지원하고 있는데요.
일단 gitgub의 bootstrap multiselect 페이지에서 관련 파일을 받아 줍니다.
위와 같이 github에서 multiselect 에 대한 파일을 제공하고 있었습니다.
이 파일을 받아서 적용하시면 됩니다.
multiselect 적용 방법
적용할 프로젝트 구조는 다음과 같습니다.
resource 폴더에 jquery 멀티셀렉트 관련 파일을 복사해 줍니다.
그리고 상단의 head 부분에 위와 같이 멀티셀렉트박스와 jquery에 대한 js와 css파일을 선언해 줍니다.
멀티 셀렉트 구현 소스
<head> <script type="text/javascript"> $(document).ready(function() { $('#multiselect').multiselect(); }); function send(){ var text = $('#multiselect').val(); for(var i=0; i<text.length; i++){ alert(text[i]); } } </script> </head> <body> <select id="multiselect" multiple="multiple"> <%for(int i=0; i<10; i++){ %> <option value="<%=i%>">숫자:<%=i%></option> <%} %> </select> <input type="button" value="전송" onclick="send();"> </body>
위의 소스코드를 실행한 모습인데요.
멀티셀렉트박스에 for문을 10번 돌려 숫자를 생성해 주고 이를 체크하고 전송을 누르면 체크한 숫자만큼 alert 창을 띄우는 예제입니다.
답글 남기기