이로
JS select의 option 옮기기 본문
반응형
JS로 두 select간의 option옮기기입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- left select -->
<select id="left" multiple style="width: 250px; height: 300px; font-size:25px">
<!-- select 안에서 전체적인 글자의 크기를 설정해 주고, 옵션의 글자크기 또 변경해 줄 수 있다.-->
<!-- 그러나 왼쪽 박스에서 초기설정해놓은 옵션들이 우측으로 이동할 때, 옵션의 폰트 사이즈 설정이 풀린다. -->
<option value="야구"
style="width: 240px; height: 30px; background-color: #f1baba; /*글자색상*/ color:red; text-align:center;">야구
</option>
<option value="볼링" style="width: 240px; height: 30px; background:#FDFF62;color:navy; font-size:8pt">볼링</option>
<option value="축구">축구</option>
<option value="배구">배구</option>
<option value="농구">농구</option>
<option value="하키">하키</option>
</select>
<!-- move Button -->
<button id='left2'>
<< </button> <button id='left1'>
< </button> <button id='right1'> >
</button>
<button id='right2'> >> </button>
<!-- right select -->
<select id="right" multiple style="width: 250px; height: 300px;"></select>
<script>
window.onload = function () {// HTML이 모두 로드 되고 실행되게하기.
// script 외부 HTML값을 다루기 위한 설정
var leftArea = document.getElementById('left');
var rightArea = document.getElementById('right');
var rbutton1 = document.getElementById('right1');// >
var rbutton2 = document.getElementById('right2');// >>
var lbutton1 = document.getElementById('left1');// <
var lbutton2 = document.getElementById('left2');// <<
// leftArea.selectedOptions로 select 창의 옵션들 클릭값 확인할 수 있다.
rbutton1.onclick = function () {// >
// leftArea.selectedIndex를 사용해서 옮기면 될거같은데 문제는 3개를 클릭해도 인덱스값을 앞에값 하나만 출력해준다.
// leftArea.selectedOption을 사용하자.
// 셀렉옵션 크기만큼 반복하고, 뒤에서부터 이동을 하자. 앞에서부터 이동을하면 한번 이동할때마다 셀렉옵션 인덱스가 변경된다.
rightArea.append(...leftArea.selectedOptions)
// 다른방법
// for (let i = leftArea.selectedOptions.length - 1; i >= 0; i--) {
// rightArea.options.add(leftArea.selectedOptions[i])
// }
// 옮긴 옵션 선택 해제하기
rightUnselect()
}
rbutton2.onclick = function () {//>>
// 왼쪽 0 번째 옵션값을 오른쪽으로 모두 옮기는데, 왼쪽에 현재 있는 옵션 수 만큼 옮기게 하면 된다.
// 길이를 for문 안에 바로 넣으면 한 번 옮길때마다 길이가 계속 바뀌어서 다 안옮겨진다. 따라서 수를 따로 빼놓고 진행하자.
rightArea.append(...leftArea.options)
//다른방법
// for (let i = leftArea.options.length - 1; i >= 0; i--) {
// rightArea.options.add(leftArea.options[0])
// }
rightUnselect()
}
lbutton1.onclick = function () {//<
leftArea.append(...rightArea.selectedOptions)
// for (let i = rightArea.selectedOptions.length - 1; i >= 0; i--) {
// leftArea.options.add(rightArea.selectedOptions[i])
// }
// 옮긴 옵션 선택 해제하기
leftUnselect()
}
lbutton2.onclick = function () {//<<
leftArea.append(...rightArea.options)
// 다른방법
// for (let i = rightArea.options.length - 1; i >= 0; i--) {
// leftArea.options.add(rightArea.options[0])
// }
leftUnselect()
}
// leftArea 클릭시 unselect() 설정하면 leftArea에 있는 속성 클릭하자마자 select가 풀려버린다.
// 양쪽 셀렉 선택 해제하는 함수
function unselect() {
leftUnselect()
rightUnselect()
}
// 왼쪽 셀렉 선택해제
function leftUnselect() {
for (let i = leftArea.options.length - 1; i >= 0; i--) {
leftArea.options[i].selected = false;
}
}
// 오른쪽 셀렉 선택해제
function rightUnselect() {
for (let i = rightArea.options.length - 1; i >= 0; i--) {
rightArea.options[i].selected = false;
}
}
}
</script>
</body>
</html>
<!--
// 왼족 셀렉트에 야구가 있는지 확인하고, 있으면 오른쪽으로 이동하게하자.
// 이벤트는 onclick으로하면 된다.
// leftArea[0].options.remove(0)하니까 왼쪽 첫 옵션 지워졌다.
// 이렇게 실행하면 지워졌다가 다시 생긴다. 처음부터 옵션을 select에 배치하면 안될 듯 하다.
// 스크립트안에 배치해서 왼쪽으로 세팅하게 해야겠다. 그러면 스크립트에서 어떻게 옵션을 주지?
맨 처음 종목들은 왼쪽 select구문 안에 옵션으로 들어가있어야 한다.
그러면 코딩할때 어디에 배치해둬야할까?
스크립트 안에 있어야 좌 우로 왔다갔다 할 수 있을 것 같다.
그러면 스크립트 안에서 옵션을 만들 수 있는 방법은?
그 다음 스크립트 안에서 만든 옵션을 left select 에 넣고, right select에 넣는 방법은?
버튼 클릭은 조금 있다가 생각하고, 맨 처음 왼쪽에 넣는 방법을 생각해보자.
처음에 왼쪽 배열에 집어넣은 상태에서 클릭하면 우측으로 이동하게는 할 수 있을까?
-->
jquery문으로 바꾸어보았습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<body>
<!-- left select -->
<select id="left" multiple style="width: 250px; height: 300px; font-size:25px">
<option value="야구">야구 </option>
<option value="볼링">볼링</option>
<option value="축구">축구</option>
<option value="배구">배구</option>
<option value="농구">농구</option>
<option value="하키">하키</option>
</select>
<!-- move Button -->
<button id='left2'>
<< </button> <button id='left1'>
< </button> <button id='right1'> >
</button>
<button id='right2'> >> </button>
<!-- right select -->
<select id="right" multiple style="width: 250px; height: 300px;"></select>
<script>
$(document).ready(function () {
// >> 오른쪽으로 모두이동
$('#right2').click(function () { //id로 호출할때는 # 붙여야한다. #id로 호출
// for (let i = 0; i < left.length; i++) {
// $('#right').append('<option>' + left.options[i].value + '</option>');
// }
// $('#left').empty();
$('#right').append($('#left > option'))
})
// << 왼쪽으로 모두 이동
$('#left2').click(function () { //id로 호출할때는 # 붙여야한다. #id로 호출
// for (let i = 0; i < right.length; i++) {
// $('#left').append('<option>' + right.options[i].value + '</option>');
// }
// $('#right').empty();
$('#left').append($('#right > option'))
})
// < 선택된 것만 왼쪽으로 이동
$('#left1').click(function () { //id로 호출할때는 # 붙여야한다. #id로 호출
$('#left').append($('#right > option:selected'))
})
// > 선택된 것만 오른쪽으로 이동
$('#right1').click(function () { //id로 호출할때는 # 붙여야한다. #id로 호출
$('#right').append($('#left > option:selected'))
})
})
</script>
</body>
</html>반응형
'컴퓨터 > 과제' 카테고리의 다른 글
| JSP 로그인 만들기 + 쿠키를 이용하여 id저장하 (1) | 2019.06.21 |
|---|---|
| JSP 로그인 요청한 곳으로 가게하기 (0) | 2019.06.21 |
| JS 체크박스 만들어보기 (+ jQuery구문으로 바꿔보기) (0) | 2019.06.19 |
| 짝 맞추기 게임 만들기 (0) | 2019.06.16 |
Comments