[웹개발#9] html select option data-value 사용하기

웹개발을 하다 보면, 늘 새로울 때가 있습니다. 심지어 10년 넘게 해 오던 일임에도 불구하고, 공부를 게을리 하다 보면 그런 경우가 더 자주 일어나곤 합니다.

javascript jquery 를 이용해 html 코드 작업을 하다 보면 data-value 를 사용해야 할 경우가 생기는데, 지금에서야 당연하게 쓰고 있지만, 몇 년 전까지만 해도 alt 속성이나 title 속성 등을 이용해서 처리하곤 했습니다. data-value 라는 게 있는지도 몰랐으니까요. 외주 일을 처리하다가 거기 직원으로부터 data-value 에 관한 정보를 들었을 때의 그 새로움이란.. 아, 부끄러움은 덤이었습니다.

이번에는 흔히 콤보박스라고도 불리는 <select><option></option></select> 태그를 선택했을 때, 각 옵션값에 따라 파일 업로드와 같은 특정 요소를 추가하거나 빼는 걸 만들어보겠습니다.

 

jsfiddle 예제가 맨 아래에 준비되어 있습니다..

 

 

코드는 아래와 같습니다.

과제를 업로드 할 과목을 선택했을 때, 각 과목의 정보가 노출되고, 각각의 업로드 가능한 파일의 개수가 달라집니다. 
심지어 업로드 할 수 없는 과목도 있습니다. 조교 선생님이 잘못하셨네요. ㅎㅎ

 

<h3>select 박스</h3>
<select id="subject" name="subject">
	<option value="" selected="selected">과제를 업로드 할 과목을 선택해주세요.</option>
	<option value="국어" data-teacher="김철수" data-begin="2022-08-01" data-end="2022-08-11" data-file-cnt="1" data-use-yn="Y">국어</option>
	<option value="수학" data-teacher="김영희" data-begin="2022-08-01" data-end="2022-08-21" data-file-cnt="2" data-use-yn="Y">수학</option>
	<option value="영어" data-teacher="이철수" data-begin="2022-08-01" data-end="2022-08-17" data-file-cnt="3" data-use-yn="Y">영어</option>
	<option value="세계사" data-teacher="이영희" data-begin="2022-08-01" data-end="2022-08-31" data-file-cnt="0" data-use-yn="Y">세계사</option>
</select>

<br />
<br />

<h3>과목 정보</h3>
<div id="desc"></div>

<br />
<br />

<h3>파일 업로드</h3>
<div id="file_wrap" style="display:none;">
	  <div class="file_cnt file_0" style="display:none;"><input type="file" name="attach_file[]" id="attach_file_0" /></div>
	  <div class="file_cnt file_1" style="display:none;"><input type="file" name="attach_file[]" id="attach_file_1" /></div>
	  <div class="file_cnt file_2" style="display:none;"><input type="file" name="attach_file[]" id="attach_file_2" /></div>
	  <div class="file_cnt file_3" style="display:none;"><input type="file" name="attach_file[]" id="attach_file_3" /></div>
	  <div class="file_cnt file_4" style="display:none;"><input type="file" name="attach_file[]" id="attach_file_4" /></div>
</div>


<script type="text/javascript">
	$(function () {
		$("#subject").on("change", function () {
			var subject = $(this).val();
			var teacher = $(this).find("option:selected").data("teacher");
			var begin = $(this).find("option:selected").data("begin");
			var end = $(this).find("option:selected").data("end");
			var file_cnt = $(this).find("option:selected").data("file-cnt");
			var use_yn = $(this).find("option:selected").data("use-yn");

      // 과목 정보 출력
      var subject_info = '';
      subject_info += '과목명 : '+subject;
      subject_info += '<br />';
      subject_info += '선생님 : '+teacher;
      subject_info += '<br />';
      subject_info += '업로드 기간 : '+begin+' ~ '+end;          
      $('#desc').html(subject_info);

			var cur_ymd = "2022-08-02";
			if( cur_ymd < begin ) {
				// before 업로드 기간 
				alert('「'+subject+'」 과목은 업로드 가능 기간 전입니다.');
				$(this).find("option:eq(0)").prop('selected','selected');
        $('#desc').html('');
			}
			else if( cur_ymd > end ) {
				// after 업로드 기간 
				alert('「'+subject+'」 과목은 업로드 가능 기간이 마감되었습니다.');
				$(this).find("option:eq(0)").prop('selected','selected');
        $('#desc').html('');
			}
			else {
				// 업로드 기간인 경우
				if(file_cnt > 0) {
					$('#file_wrap').show();
					$('.file_cnt').hide();
					for(i=0;i<file_cnt;i++) {
						$('.file_'+i).show();
					}
				}
				else {
					$('#file_wrap').hide();
					$('.file_cnt').hide();
				}
			}
		});
	});
</script>

 

 

아래 링크에서 실제로 구동되는 것을 확인하실 수 있습니다.

https://jsfiddle.net/hijobs/vt65w2dg/7/

html select option data-value 사용하기 - JSFiddle - Code Playground