[JS] <option>태그에는 <a>태그를 사용할 수 없을 때 ?_`onchange`

 

문제 : 다른 옵션을 클릭하면 옵션값을 변경하고 싶은데 자바스크립트코드가 먹히지 않는다.

 

 

문제의 코드 :

<select class="rentOption" name="rentOption" id="rentOption">
	<option value="rentTime" hidden>${rentTime}</option>`;
								
	if(rentTime === '1') {
	rentList += `
	<option value="1" selected>1타임</option>
	<option value="2"><a href="#" onclick="optionClick('2');">2타임</a></option>
	<option value="3"><a href="#" onclick="optionClick('3');">3타임</a></option>`;
	} else if(rentTime === '2') {
	rentList += `
	<option value="1"><a href="#" onclick="optionClick('1');">1타임</a></option>
	<option value="2" selected>2타임</option>
        <option value="3"><a href="#" onclick="optionClick('3');">3타임</a></option>`;
	} else if(rentTime === '3') {
	rentList += `
	<option value="1"><a href="#" onclick="optionClick('1');">1타임</a></option>
	<option value="2"><a href="#" onclick="optionClick('2');">2타임</a></option>
	<option value="3" selected>3타임</option>`; 
	} 
	rentList += `
</select>

 

찾아보니,

<option> 태그 안에 <a> 태그를 직접 사용하는 것은 HTML의 규칙에 따라 잘못된 구문이고, HTML 표준에서는 <option> 태그 안에 인라인 요소를 사용할 수 없도록 지정하고 있다. 그리고 <option> 태그는 기본적으로 클릭 이벤트를 지원하지 않는다. 그래서 <select> 태그에 변경 이벤트(`onchange`) 를 사용해서 옵션이 변경되었을 때 이벤트를 처리해야 한다.

 

.

.

 

`onchange` 로 변경한 코드 : 

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

그런데 저 코드 자체에도 문제가 있어서 코드를 수정해야 했다.

${rentTime === '1' ? 'selected' : ''} 표현식에서 에러가 나서 페이지 자체가 뜨지 않았다. 그래서 밑의 코드와 같이 수정했다.

 

.

.

 

수정한 코드 :

수정1 > 

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

방법1 ) 백틱 내에서 HTML 태그를 사용하려면 백틱을 이스케이프(escape)해야함

 

 

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>';

방법 2 ) 문자열을 작은따옴표(')로 둘러싸고, 문자열 내에서 변수를 삽입하기 위해 + 연산자를 사용했다. 또, 선택된 옵션을 확인하기 위해 삼항 연산자(? :)를 사용해서 조건에 따라 selected 속성을 주었다.