자바스크립트 select, option 제어하기

각각의 버튼을 클릭하면 해당 버튼에 정의해놓은 기능이 실행

셀렉트 박스

---

동물선택

---

강아지 고양이 거북이 토끼 이구아나

---

<form name="form1">
    <fieldset>
      <legend>셀렉트 박스</legend>
      <hr>
      <label>동물선택</label>
      <select name="sel1" mutiple size="7">
        <option value="1">강아지</option>
        <option value="2">고양이</option>
        <option value="3">거북이</option>
        <option value="4">토끼</option>
        <option value="5">이구아나</option>
      </select>
      <hr>
      <input type="button" value="alert" name="btn1">
      <input type="button" value="강아지선택" name="btn2">
      <input type="button" value="햄스터추가" name="btn3">
      <input type="button" value="삭제" name="btn4">
      <input type="button" value="콘솔창확인" name="btn5">
    </fieldset>
</form>

• multiple은 다중값 선택 가능을 위한 속성
• size는 option의 갯수

<script>
  var btn1 = document.form1.btn1;
  var btn2 = document.form1.btn2;
  var btn3 = document.form1.btn3;
  var btn4 = document.form1.btn4;
  var btn5 = document.form1.btn5;
  var sel1 = document.form1.sel1; //select

  btn1.onclick = fuction() {
    alert(sel1.value);
  }

</script>

• sel1.options는 select 안의 option 배열
• select의 value는 선택한 옵션의 value
• option에 value가 없다면 value는 option의 PCDATA(option태그에 쓴 데이터)

1. “alert” 버튼 : 선택한 옵션 값을 alert창으로 확인

<script>
  //1.
  btn2.onclick = fuction() {
    sel1.selectedIndex = 0;
  }

  //2.
  btn2.onclick = fuction() {
    sel1.value = "강아지";
  }
</script>

• selectedIndex는 선택된 옵션의 번호
• index는 0부터 시작

2. “강아지” 버튼 : 어떤 옵션을 선택해도 강제로 강아지 선택

<script>
  //1.
  btn2.onclick = fuction() {
    sel1.selectedIndex = 0;
  }

  //2.
  btn2.onclick = fuction() {
    sel1.value = 1;
  }

  //3. option에 value가 없다면 적용가능
  btn2.onclick = fuction() {
    sel1.value = "강아지";
  }
</script>

3. “햄스터추가” 버튼 : 옵션에 햄스터 추가하기

<script>

btn3.onclick = fuction() {
    var op = new Option(); //option태그 생성

    op.text = "햄스터";
    op.value = 6;

    sel1.add(op); //select 태그에 option태그 추가

    //중복검사 > 중복되면 들어갈 수 없음

    var flag = true;

    for (var i=0; i<sel1.length; i++) {
      if(op.value == sel1.options[i].value) {
        flag = false;
        break;
      }
    }

    if(flag) {
      sel1.add(op);
    }
}
</script>

4. “삭제” 버튼 : 선택한 옵션 삭제하기

<script>
btn4.onclick = function() {
            sel1.options.remove(sel1.selectedIndex);
}
</script>

• remove : 배열 요소 삭제
• selectedIndex : 선택된 요소 인덱스

5. “콘솔창확인” : 선택한 옵션 콘솔창으로 확인하기

btn5.onclick = function() {
            for (var i=0; i<sel1.length; i++) {
                if(sel1.options[i].selected) { //선택이 되어있는 상태인지?
                    console.log(sel1.options[i].value, sel1.options[i].text)
                }
            }
}

• selected : 선택된 상태

💗 개발 공부하는 블로그입니다. 틀리거나 문제될게 있다면 코멘트 부탁드립니다. 👉👈