[javascript/jQuery] select box와 option 제어하기

 

select box를 제어해보기

 

 

selectbox를 사용하던 중 정리해두면 좋을 것 같아서 포스팅 해볼게요!

자주 사용하는 기능을 jQuery와 javascript로 분류했습니다.

 

 

<select name="bank">
    <option value="shinhan">신한은행</option>
    <option value="hana">하나은행</option>
    <option value="kb" selected>국민은행</option>
    <option value="woori">우리은행</option>
    <option value="nh">농협은행</option>
</select>

 

 

 

1. select box 의 selected 된 옵션값, 텍스트 가져오기

 

jQuery

$("select[name=bank] option:selected").val();       // kb 
$("select[name=bank] option:selected").text();      // 국민은행

 

javascript

document.querySelector("select[name=bank] option:checked").value;   // kb 
document.querySelector("select[name=bank] option:checked").text;    // 국민은행
document.querySelector("select[name=bank] option:checked").innerText;   // 국민은행
    
// 또는
let sel = document.querySelector("select[name=bank]");
sel.options[sel.selectedIndex].value;                   // kb
sel.options[sel.selectedIndex].text;                    // 국민은행

 

 

 

2. 특정 옵션 값으로 select box 선택하기

 

- 옵션값이 'hana'인 것 선택하기

 

 

jQuery

$("select[name=bank]").val("hana").prop("selected", true);
// 또는
$("select[name=bank] option[value=hana]").prop("selected", true);

 

javascript

let sel2 = document.querySelector("select[name=bank]").options;
for (let i=0; i<sel2.length; i++) {
    if (sel2[i].value == "hana") sel2[i].selected = true;
}

 

 

 

3. 특정 텍스트 값으로 select box 선택하기

 

- 텍스트가 '농협은행' 인 것 선택하기

 

 

jQuery

$("select[name=bank] option:contains('농협은행')").prop("selected", true);

 

javascript

let sel3 = document.querySelector("select[name=bank]").options;
for (let i=0; i<sel3.length; i++) {
    if (sel3[i].text == "농협은행") sel3[i].selected = true;
}

 

 

 

4. select box n번째 옵션 선택하기 (특정 인덱스로 선택)

 

- 4번째 옵션 선택하기
- 0번째 부터 시작하기 때문에 -1을 해줍니다.

 

 

jQuery

$("select[name=bank] option:eq(3)").prop("selected",true);

 

javascript

document.querySelectorAll("select[name=bank] option")[3].selected = true;

 

 

 

5. select box 옵션 추가하기

 

- 옵션으로 '카카오뱅크'를 추가

 

jQuery

$("select[name=bank]").append('<option value="kakao">카카오뱅크</option>');

 

javascript

let opt = document.createElement("option");
opt.value = "toss";
opt.text = "토스뱅크";
document.querySelector("select[name=bank]").add(opt, null);
// 또는
let opt2 = document.createElement("option");
opt2.value = "ibk";
opt2.text = "기업은행";
document.querySelector("select[name=bank]").appendChild(opt2);

 

 

 

6. select box 삭제

 

jQuery

// 1) 옵션값으로 삭제
// 옵션값이 kakao 인 것 삭제
$("select[name=bank] option[value=kakao]").remove();

// 2) 텍스트로 삭제
// 텍스트가 토스뱅크 인 것 삭제
$("select[name=bank] option:contains('토스뱅크')").remove();

// 3) 특정 인덱스(n번째)로 삭제
// 옵션의 마지막 인덱스를 추출해서 삭제
let last_index = $("select[name=bank] option").length - 1;
$(`select[name=bank] option:eq(${last_index})`).remove();

 

javascript

// 1) 옵션값으로 삭제
// 옵션값이 kakao 인 것 삭제
let sel4 = document.querySelector("select[name=bank]").options;
for (let i=0; i<sel4.length; i++) {
    if (sel4[i].value == "kakao") sel4[i].remove();
}

// 2) 텍스트로 삭제
// 텍스트가 토스뱅크 인 것 삭제
let sel5 = document.querySelector("select[name=bank]").options;
for (let i=0; i<sel5.length; i++) {
    if (sel5[i].text == "토스뱅크") sel5[i].remove();
}

// 3) 특정 인덱스(n번째)로 삭제
// 옵션의 마지막 인덱스를 추출해서 삭제
let last_index = $("select[name=bank] option").length - 1;
document.querySelectorAll("select[name=bank] option")[last_index].remove();