[Jquery] Select Box option 추가 및 삭제

동적으로 javascript 에서 Select Box option 값을 추가 및 삭제해보자

 

아래와 같이 Select Box 가 존재한다.

<select id="server_seq" name="server_seq" class="detail_select">
     <option value="">선택</option>
     <option value="전체">전체</option>
     <option value="제목">제목</option>
     <option value="내용">내용</option>
     <option value="작성자">작성자</option>
     <option value="제목+내용">제목+내용</option>
     <option value="제목+내용+작성자">제목+내용+작성자</option>
</select>

 

$("#server_seq option[value='전체']").remove();

특정값을 삭제하는 문장이다. select box 의 option 중 value 값이 전체인 option 값을 삭제한다.

 

$("#server_seq").append("<option value=\"특정값\">특정값</option>");

특정값을 추가하는 문장이다. option 의 value 값은 "특정값" 이며 보여지는 값은 "특정값"이다.

 

$("#server_seq").children('option:not(:first)').remove();

첫번째값을 제외하고 모든 option 값을 삭제하는 문장이다.

보통은 Select Box 의 첫번째 option 값은 빈값이 설정되기 때문에 첫번째 값을 제외하고

나머지 값들을 재설정 해야할 경우 사용하면 된다.

 

let count = 10;
for(let i = 0;i < count;i++){
    $("#server_seq").append("<option value=\"" + i + "\">테스트값" + i + "</option>");
}

반복문을 사용하여 Select Box 에 option 값을 추가한다.

1~10 까지 value 값 및 테스트값1~10 을 설정한다.