자바스크립트 Select(셀렉트박스) 객체 뜻과 간단예제

이전 게시글/컴퓨터#웹 Jv.Script 2017. 2. 27. 19:27

자바스크립트 Select(셀렉트박스) 객체 속성 알아보기

select 객체는 여러 개의 목록 중에서 하나 이상을 선택하는데 사용하는 객체로 form 객체의 하위 객체입니다.

selectedindex 속성을 이용해서 선택한 메뉴가 몇번째 메뉴인지 알 수 있는 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    function select1(form){
        alert("당신은 "+form.bunho.selectedIndex+" 번 동물을 
좋아하는군요.");
    }
</script>
</head>
<body>
    <form>
        <h2>좋아하는 동물을 선택하세요.</h2>
        <select name="bunho" size="5">
        <!-- 선택할 수 있는 이름은 bunho라고 지정하고 사이즈
를 5로 지정해준다. -->
            <option value="도깨비" selected> 도깨비
            <option value="토끼"> 토끼
            <option value="제비"> 제비
            <option value="고양이"> 고양이
            <option value="강아지"> 강아지
            <option value="호랑이"> 호랑이
            <option value="거북"> 거북
        </select><p>
        
        <input type="button" value="클릭!" onclick="select1
(this.form)">
        <!-- 입력 형태인 버튼을 생성하고 onClick 이벤트 핸들
러가 발생하면 select함수를 호출한다. -->
    </form>
</body>
</html>
Colored by Color Scripter
cs

결과가 제비를 선택하고 클릭을 누르니 2번이라고 나옵니다.

그것은 깨비를 선택하면 0번으로 나온다는 뜻이겠죠..

그는 select 객체가 배열로 되어있다는 것인데 배열의 초기값이 0이 되어있다는 것이죠. ㅎㅎ

저작자표시

'이전 게시글 > 컴퓨터#웹 Jv.Script' 카테고리의 다른 글

자바스크립트 Textarea 객체의 뜻과 간단예제 (0)	2017.02.27
자바스크립트 input Text(텍스트) 객체 뜻과 간단예제 (0)	2017.02.27
자바스크립트 개체 제어문을 알아보자 (0)	2016.06.25
자바 스크립트 예약어의 종류 (0)	2016.06.25
[기초강좌] 자바스크립트의 기본 문법/변수 (0)	2016.06.25