728x90
1. 사용방법
<body>
<select>
<option value="0">value값을 0또는 1을 줌</option>
<option value="원하는 옵션">원하는 옵션</option>
</select>
</body>
<body>
<select>
<option value="0">선택하세용</option>
<option value="apache">아파치</option>
<option value="tomcat">톰캣</option>
<option value="iis">IIS</option>
<option value="nginx">엔진엑스</option>
</select>
</body>
selected
selected를 사용하므로써 디폴트 선택이 엔진엑스로 들어감
<body>
<select>
<option value="0">선택하세용</option>
<option value="apache">아파치</option>
<option value="tomcat">톰캣</option>
<option value="iis">IIS</option>
<option value="nginx" selected>엔진엑스</option>
</select>
</body>
onchange
기본이벤트를 onchange라 함!!
onchange에서 f_chg()를 호출
>> 데스크톱용
더보기
1) 콤보박스에 대해 배워보장
<body>
<select onchange="f_chg()">
<option value="0">선택하세용</option>
<option value="apache">아파치</option>
<option value="tomcat">톰캣</option>
<option value="iis">IIS</option>
<option value="nginx" selected>엔진엑스</option>
</select>
</body>
2) 콤보박스 안의 내용 클릭하면 '옥진욱짱'이 출력
<body>
<select id="id_sel" onchange="f_chg()">
<option value="0">선택하세용</option>
<option value="apache">아파치</option>
<option value="tomcat">톰캣</option>
<option value="iis">Interner Information Service(IIS)</option>
<option value="nginx" selected>엔진엑스</option>
</select>
<script>
var v_sel = document.getElementById("id_sel");
function f_chg(){
alert("옥진욱 짱♡♥");
}
</script>
</body>
3) 어떤 것을 선택하든지 nginx만 출력
<body>
<select id="id_sel" onchange="f_chg()">
<option value="apache">아파치</option>
<option value="tomcat">톰캣</option>
<option value="iis">Interner Information Service(IIS)</option>
<option value="nginx" selected>엔진엑스</option>
<option value="0">선택하세용</option>
</select>
<script>
var v_sel = document.getElementById("id_sel");
function f_chg(){
alert(v_sel.options[3].value);
}
</script>
</body>
4) 선택된것만 출력(정석)
배열은 객체!
<body>
<select id="id_sel" onchange="f_chg()">
<option value="apache">아파치</option>
<option value="tomcat">톰캣</option>
<option value="iis">Interner Information Service(IIS)</option>
<option value="nginx" selected>엔진엑스</option>
<option value="0">선택하세용</option>
</select>
<script>
var v_sel = document.getElementById("id_sel");
var v_opts = v_sel.options;
function f_chg() {
for(var i=0;i<v_opts.length;i++){
if(v_opts[i].selected){
alert("선택하신 value는 "+v_opts[i].value+"입니다.");
}
}
}
</script>
</body>
5) 편리한 방법
alert(v_sel.value);가 'f_chg()'를 대체
<body>
<select id="id_sel" onchange="f_chg()">
<option value="apache">아파치</option>
<option value="tomcat">톰캣</option>
<option value="iis">Interner Information Service(IIS)</option>
<option value="nginx" selected>엔진엑스</option>
<option value="0">선택하세용</option>
</select>
<script>
var v_sel = document.getElementById("id_sel");
var v_opts = v_sel.options;
function f_chg() {
alert(v_sel.value);
}
</script>
</body>>> 모바일용
'화면구현 > HTML' 카테고리의 다른 글
| Text Area (0) | 2020.06.22 |
|---|---|
| 이미지 (0) | 2020.06.22 |
| HTML 테이블로 구구단 출력 (0) | 2020.06.19 |
| HTML 라디오버튼과 체크박스 (0) | 2020.06.19 |
| HTML 버튼과 텍스트와 복사와참조 (0) | 2020.06.19 |