[javascript]HTML의 select, option 드롭바 이용하기

html 드롭바 만들기

html의 드롭바를 사용할 경우 css를 만져서 드롭바를 만드는 방법과

html의 드롭바 태그인 select 태그를 이용하는 방법이 있다

https://korearaogong.tistory.com/19

[HTML]select, option, optgroup 드롭바 사용법

 

html에서 아무리 드롭바를 만져도 javascript로 행동을 만들어주지 않으면 무용지물이다

 

html의 select 이용하는 방법

예를 들어 무언가를 순서대로 출력하거나 랜덤으로 출력하려고 했을때 html 코드는

<select id="select" onchange="s_select()"> //select태그의 id는 select이고 내용이 변하면(onchange) s_select함수를 불러와라
  <option value="1">순차</option> //select의 1이라는 값을 갖고 있는 순차라는 첫번째 옵션
  <option value="2">랜덤</option> //select의 2이라는 값을 갖고 있는 랜덤이라는 두번째 옵션
</select>
<span id="print"></span>//결과물을 확인할 곳

이런식이 된다

function s_select(){
  let selectTag = document.getElementById("select").options[document.getElementById("select").selectedIndex].value;
/*document.getElementById("select") -- select라는 id를 갖은 태그 선택
.options -- select라는 id의 옵션들중 
[document.getElementById("select").selectedIndex] -- selectedIndex -> 선택된 option의 index값(몇번째인지)을 받음
.value; -- value을 받아오기*/


  if(selectTag == 1){//1을 선택하면 순차
    document.getElementById("print").innerHTML = '순차';
  } else { //1이 아니면 랜덤 또는 } else if(selectTag == 2){로해서 2를 선택하면 랜덤
    document.getElementById("print").innerHTML = '랜덤';
  }
}

결과

See the Pen Untitled by korearaogong (@korearaogong) on CodePen.