2024.08.27.JS - 셀렉트박스

* 셀렉트박스 값 가져오기.

<form action="test6_result.jsp" name="fr">
    <select name="fruits">
        <option value="Apple">사과</option>
        <option value="Grape">포도</option>
        <option value="Banana">바나나</option>
    </select>
    <input type="button" value="선택값확인" id="btnCheck">
    <div id="infoArea"></div>
    <hr>		
    <select name="fruits2">
        <option value="">과일을 선택하세요</option>
        <option value="Apple">사과</option>
        <option value="Strawberry">딸기</option>
        <option value="Banana">바나나</option>
    </select>
    <input type="text" name="selectedFruits" readonly>
    <input type="button" value="바나나 구매하기" id="btnBuy">
    <hr>
    <input type="submit" value="전송">
</form>

window.onload = function() {
	// 전송버튼(submit)이벤트 핸들링 => 해당폼의 onsubmit 속성 활용하여 submit 이벤트로 핸들링
	document.fr.onsubmit = function() {
		// 현재 셀렉트박스 선택항목이 "과일을 선택하세요"일 겨우
		// "과일 선택 필수!" 경고창 출력하고 셀렉트 박스에 포커스 요청
		
		// 1. 셀렉트박스 value 속성값이 널스트링("")인지 판별하기
		if(document.fr.fruits.value == ""){
			alert("과일 선택 필수!!");
			document.fr.fruits.focus(); // 이거 페이지가 자꾸 넘어가는데??
****		// submit 이벤트 핸들링 과정에서 submit 동작을 취소하려면 return false를 해야한다!
			return false; // 현재 함수 실행 즉시 종료 => submit 동작취소됨
			// 만약, submit 동작을 수행하려면 true값을 리턴하거나 return 문 자체 생략
		}

		// 2. 셀렉트박스내의 option 태그 항목들이 셀렉트박스 객체 내의 options 이름의 배열로 관리되므로
		// 		배열의 첫번째 인덱스요소에 접근하여 selected 속성값이 true 인지 판별
		if(document.fr.fruits.options[0].selected){ // 0번배열에 있는 값이 선택되어있으면 경고창!
			alert("과일 선택 필수!");
			document.fr.fruits.focus(); 
			return false; 
		}
	}
	
	// 주의!! 셀렉트박스 클릭이벤트 연결시 항목선택없이 
	// 셀렉트박스 자체를 클릭하기만해도 이벤트가 발생하게 되므로 효율적이지 않다!!! onclick 사용금지
	// => 셀렉트박스 항목 선택시에만 이벤트 동작하도록 하려면
	// click 이벤트 대신 change 이벤트 처리 => 기존 선택 항목 외의 다른 항목 선택 시 동작
	document.fr.fruits2.onchange = function() {
		// 만약, 과일을 선택하세요 항목이 선택되어 있을 경우
		// 텍스트박스 편집(입력)이 불가능하도록 "읽기전용"으로 설정하고
		// 다른 항목이 선택되어 있을 경우 "읽기전용" ㅅ ㅏㅇ태를 "해제"
		// => 자바스크립트상에서 해당 속성ㅇ값을 제어하려면 true or false 값을 사용하여 제어
		// => 주의! HTML 속성며이 두단어 이상의 조합일 경우
		//		자바스크립트에서 접근 시 해당 속성명을 Camel-case 표기법으로 지정해야 한다.!
		//		즉, readOnly 형식으로 표기해야 한다.
		// ex) xxx.readonly = true가 아니라 xxx.readOnly = true(읽기전용) or false(읽기전용해제)
		if(document.fr.fruits2.options[0].selected){ 
			document.fr.selectedFruits.readOnly = true;
			document.fr.selectedFruits.style.background = "#CCCC99";
		} else {
			document.fr.selectedFruits.readOnly = false; // 읽기전용 해제
			document.fr.selectedFruits.style.background = "";
		}
	}
	
	// 바나나 구매하기 버튼 클릭 시 바나나 항목 텍스트를 바나나(품절)로 변경하고
	// 해당항목 선택이 불가능하도록 처리(disabled 속성활용)
	document.querySelector("#btnBuy").onclick = function() {
		document.fr.fruits2.options[3].text = "바나나(품절)"; // value는 option안의 값이고 여기서는 글자를 바꿀거니까 text를 써라.
		document.fr.fruits2.options[3].disabled = true;
	}
}