[JS] 동적으로 생성한 <option>태그의 value 가져오기

동적으로 생성한 option 태그의 value 를 가져와서 옵션변경하려는 코드를 짜보았다.

 

동적으로 생성한 <select><option> 태그 : 

--중략--

rentList += '<td>';
rentList += '<select class="rentOption" name="rentOption" id="rentOption" onchange="optionChange(this)">';
rentList += '<option value="1"' + (rentTime === '1' ? 'selected' : '') + '>1타임(10:00~12:00)</option>';
rentList += '<option value="2"' + (rentTime === '2' ? 'selected' : '') + '>2타임(13:00~15:00)</option>';
rentList += '<option value="3"' + (rentTime === '3' ? 'selected' : '') + '>3타임(15:00~17:00)</option>';
rentList += '</select>';
rentList += '</td>';

--중략--

참고 ) onchange="optionChange(this)" 의 `this` 키워드란?

optionChange 함수는 HTML 이벤트 핸들러로 사용되고 있다. 이벤트 핸들러 함수는 일반적으로 해당 이벤트가 발생한 요소를 가리키는 `this` 키워드를 통해 해당 요소에 접근할 수 있다. `<select>` 요소에서 onchange="optionChange(this)"와 같이 이벤트 핸들러를 등록한 경우, this는 현재 선택한 <select> 요소를 가리키게 된다. 이렇게 this를 이용해서 선택한 요소에 접근할 수 있으므로, optionChange 함수의 매개변수 이름은 자유롭게 지을 수 있다. 매개변수 이름은 `this` 로 지어도 되고, 명확한 의미를 주기 위해서 `select` 와 같은 의미의 명칭을 사용해도 좋다.

 

 

 

처음에 error가 났던 문제의 코드 : 

//옵션변경하기
function optionChange(optionValue) {
	if(optionValue === '1') {
		alert('1타임으로 변경하시겠습니까?');
                 //기능추가
	} else if (optionValue === '2') {
		alert('2타임으로 변경하시겠습니까?');
		//기능추가
	} else if(optionValue === '3') {
		alert('3타임으로 변경하시겠습니까?');
		//기능추가
	} else {
		alert("error");
	}
}

에러가 나는 이유?

`optionChange` 함수 내부에서 optionValue 를 비교할 때 발생한 에러였다. optionValue 는 DOM 요소인 <select> 엘리먼트 자체이므로, `===` 연산자를 사용해서 문자열과 비교하는 것이 부적절했던 것!

 

optionvalue 는 <select> 요소의 선택된 옵션의 값을 나타내기 때문에, optionValue.value 를 사용해서 선택된 옵션의 값을 가져와 비교해야한다. 

 

.

.

 

수정한 코드 : 

//옵션변경하기
function optionChange(selectElement) {
	var optionValue = selectElement.value;
	if(optionValue === '1') {
		alert('1타임으로 변경하시겠습니까?');
		//기능추가
	} else if (optionValue === '2') {
		alert('2타임으로 변경하시겠습니까?');
		//기능추가
	} else if(optionValue === '3') {
		alert('3타임으로 변경하시겠습니까?');
		//기능추가
	} else {
		alert("error");
	}
}

selectElement 는 onchange 이벤트 핸들러 함수(`optionChange`) 의 매개변수로 전달되는 값이다. 이 매개변수는 이벤트가 발생한 DOM요소, 즉 <select> 엘리먼트 자체를 나타낸다.

 

HTML에서 <select> 요소에 onchange="optionChange(this)" 라고 설정하면, `this` 키워드는 해당 <select> 요소를 참조한다. 따라서 이벤트가 발생했을 때, optionChange 함수가 호출되면서 this 를 인수로 받게 되고, 이 값을 selectElement 매개변수로 사용할 수 있다.

 

즉, selectElement 는 <select> 요소를 가리키는 자바스크립트 객체로서, 해당 객체의 속성 중 value 속성을 사용하여 선택된 옵션의 값을 가져올 수 있다.

 

참고로! `optionChange` 함수의 매개변수 이름을 자유롭게 지어도 된다. `this` 키워드를 사용해서 이벤트가 발생한 <select> 요소를 참조하고, 해당 매개변수 이름으로 사용하면 된다. 예를 들어 optionChange 함수의 매개변수 이름을 selectElement 대신에 select 라고 지을 수도 있다. 그렇게 되면 select.value 가 되겠지?