셀렉트박스 선택시 경고창 스크립트를 어떻게 짜야할까요?
본문
스크립트를 어떻게 만들어야 할지 몰라서 문의 드립니다.
셀렉트박스 두개가 있습니다.
하나는 시작시간 하나는 종료시간입니다.
제가 하고싶은것은
종료시간이 시작시간보다 같거나 앞에 있을경우에
(이루질수 없는 경우이겠지요)
"시간설정 오류입니다." 라는 메세지를 띄우고 싶습니다.
어떻게 해아할지 감이 안오네요
고수님들의 답변을 부탁드립니다.
답변 1
다음 코드가 도움이 될지 모르겠습니다.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function validate_option(evt) {
var idx = null;
var val_a = $('#opt_start option:selected').attr('value')?.replace(':', '') || -1;
var val_b = $('#opt_finish option:selected').attr('value')?.replace(':', '') || -1;
val_a = Number(val_a);
val_b = Number(val_b);
if (val_a > -1 && val_b > -1 && val_a >= val_b) {
alert('시간설정 오류입니다.');
idx = $(evt.target).attr('idx-before') || 0;
$(evt.target).children('option:eq(' + idx + ')').prop('selected', true);
return;
}
idx = $(evt.target).children('option:selected').index();
$(evt.target).attr('idx-before', idx);
}
$(function () {
$('#opt_start').change(validate_option);
$('#opt_finish').change(validate_option);
});
</script>
<select id="opt_start">
<option>시작시간</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
</select>
<select id="opt_finish">
<option>종료시간</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
</select>
놀라운 능력에 감사드립니다.
너무너무 잘돌아갑니다.~^^
답변을 작성하시기 전에 로그인 해주세요.