JavaScript로 select 태그에 option 요소들 나중에 추가하기 (appendChild)

- 전체적인 흐름 - 

> select 태그 중에 id가 sales_type인 요소를 선택하기
> option 태그를 요소로 만들기
> option 태그 안에 넣고 싶은 텍스트 값 넣기
> 새로 만든 option 요소를 select 태그 안에 넣기

<select id="sales_type">
    <option>전체</option>
</select>

 

 

 function listSelectOptionSalesType(list) {
    list = ['opA', 'opB', 'opC']; 	//서버에서 받아오는 배열
    let sel = document.querySelector('#sales_type'); 	//select 태그 중에 id가 sales_type인 요소를 선택하기
    list.forEach(function(item, index) { 	//배열 요소들을 가지고 반복문
        let newOption = document.createElement('option'); 	//비어 있는 option 태그 요소를 새로 만들기
        newOption.innerHTML = item; 	//새로 만든 option 태그 안에 텍스트 값 넣기
        let inner = document.createTextNode(item); 	//새로 만든 option 태그 안에 텍스트 값 넣기 : 다른 방법
        newOption.appendChild(inner); 	// createTextNode 함수를 이용해서 텍스트 요소를 만들었다면 먼저 option 태그 안으로 넣어주어야 한다 (여기서 item은 문자열)
newOption.setAttribute('num', index); 	//필요하다면 index를 이용해서 속성 값을 줄 수도 있다.
        sel.appendChild(newOption); 	//새로 만든 option 요소를 select 태그 안에 넣기
    });
}

 

        let inner = document.createTextNode(index);
        newOption.appendChild(inner);
//위 두 줄을 아래처럼 한 줄로 대체할 수 있다.
        newOption.innerHTML = item;

createTextNode는 새로운 텍스트 요소를 만들어서 option 태그 안에 넣어주는 기능이고,
innterHTML은 선택한 요소 안에 있는 여러 속성들 중에 innerHTML 이라는 속성에 접근하여 직접 값을 넣어주는 기능이다.



jQuery를 이용해서 아래처럼 똑같은 기능을 구현할 수 있다.

function listSelectOptionMfcomp(list) {
    list = ['opA', 'opB', 'opC'];
    $.each(list, function(index, item) {
        let newOption = '<option>';
        newOption += item;
        newOption += '<option/>';
        $(newOption).appendTo($('select#mfcomp')); 	//$(newOption)안에 문자열을 넣어주면 그 문자열을 바탕으로 새로운 요소를 만듦.
        $('select#mfcomp').append($(newOption)); 	//위와 같은 코드. $(A).appendTo(B) 는 B 안에 A를 서브 노드로 추가함. $(A).append.(B) 는 A 안에 B를 자식 노드로 추가함.
    });
}

 

220401