[자바스크립트 js / 실무 기록] 셀렉트 옵션을 버튼으로 '이전', '다음', '현재' 컨트롤 하기

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

이번 포스팅에서는 자바스크립트/제이쿼리로 셀렉트박스의 옵션을 버튼으로 컨트롤 하는 방법에 대해 다루겠습니다.

먼저 완성된 이미지 먼저 보여드릴게요.

<, >, 현재 버튼으로 차수를 컨트롤하는 기능을 다룰 거예요.

'<'는 이전 차수,

'>'는 다음 차수,

'현재'는 현재 차수가 되겠죠?

 

차수라는 단어로 인해 헷갈리게 된다면, 차수라는 단어는 무시하고 봐주셔도 됩니다!

제가 작업할 때 '차수'라는 단어를 사용하여 작업을 했어서 이렇게 보여지는 것일 뿐,

각자의 작업 내용에 따라 변경해 주세요 :)

 

 

  html

우선 select박스와 각각의 버튼을 만들어 주세요.

class에 적혀 있는 내용들은 부트스트랩을 사용해서 스타일을 잡기 위해 사용했습니다.

class안의 내용들은 무시해주시고, id만 봐주세요.

<div class="col-lg-3 d-flex flex-column justify-content-center align-items-center">
	<div class="d-flex flex-row align-items-center">
		<select id="yearSel" class="main-content-label tx-26 m-0 mr-4" style="background: none; border: none; outline: none; width: 120px;">
		</select>
		<select id="degreeSel" class="main-content-label tx-26 m-0" style="background: none; border: none; outline: none; width: 150px;"></select>
	</div>
	<div class="mt-3">
		<div id="prevDe" class="btn btn-primary ti-angle-left degreeBtn"></div>
		<div id="nextDe" class="btn btn-primary ti-angle-right degreeBtn"></div>
		<div id="nowDe" class="btn btn-primary degreeBtn">현재 차수</div>
	</div>
</div>

 

 

 

 

  js

버튼마다 제대로 기능이 구현되고 있는지 확인해서 consol.log를 넣어줬어요.

changeDegreeBox(type) 함수를 만들고, type에 각각의 파라미터를 전달해주는 거예요.

changeDegreeBox함수 내용을 보시면, 전달되는 파라미터에 따라 if문으로 실행되는 기능을 다르게 해줬습니다.

그리고 가장 마지막 차수에서는 alert을 통해 사용자에게 '마지막 차수입니다'라는 문구를 띄워 인지할 수 있도록 처리했어요.

 

변수 idx에 담은 내용을 봐주세요.

option:selected. 즉, 선택된 옵션에서 값을 +1 혹은 -1 해주고 있습니다.

또한, 현재 차수는 가장 최근에 등록된 차수이므로 eq(0)으로 선택해 불러주고 있죠.

 

마지막으로, 맨 마지막에 trigger를 사용하여 변경된 내용으로 브라우저에 보여지는 내용을 change해주고 있습니다.

// 이전 차수
$('#prevDe').on('click', function () {
  console.log('이전');
  changeDegreeBox('prev');
})

// 다음 차수
$('#nextDe').on('click', function () {
  console.log('다음');
  changeDegreeBox('next');
})

// 현재 차수
$('#nowDe').on('click', function () {
  console.log('현재 차수');
  changeDegreeBox()
})


function changeDegreeBox(type) {
	var degreeSel = $('#degreeSel')
	var idx = $("#degreeSel option").index($("#degreeSel option:selected"));

	if (type == 'prev') {
		if ((idx + 1) == degreeSel.children('option').length) {
			return alert('가장 마지막 차수입니다.');
		} else {
			idx++
			$("#degreeSel option:eq(" + idx + ")").prop("selected", true);
		}
	} else if (type == 'next') {
		if (idx == 0) {
			return alert('가장 최근 차수입니다.')
		} else {
			idx--
			$("#degreeSel option:eq(" + idx + ")").prop("selected", true);
		}
	} else {
		$("#degreeSel option:eq(0)").prop("selected", true);
	}
	degreeSel.trigger('change');
}