Web/Javascript
16장:입력양식3(Form)
Ishaya seon
2009. 7. 29. 14:57
반응형
- Select 객체
- Select 속성
- Select 객체의 특성
특성 의미 name 리스트박스의 이름 length 리스트박스에 포함되어 있는 목록의수 type type에 입력된값(select) selectedIndex 리스트 박스에서 현재 선택된 목록의 인덱스 options 리스트박스에 포함된 목록 정보의 배열 options[i].index 각 목록의 인덱스 options[i].text 각 목록의 문자열 options[i].value 각 목록에 할당되어 있는 값 options[i].prototype 옵션 메뉴에 새로운 특성을 만들기 위한 것 options[i].selected 각 목록이 현재 선택되어 있는지의 여부 options[i].defaultSelected 각 목록이 처음 선택되어 있는지의 여부 - Select 객체의 이벤트 핸들러
이벤트 핸들러 의미 onChange 다른 목록을 선택 했을때 발생하는 이벤트 핸들러 예제1 실행화면 <script>
function foods(mira) {
var sel = "선택된 음식 \n\n"
for(i = 0;i
sel += mira.food.options[i].text + "\n"
}
}
alert(sel)
}
</script>
<form>
좋아하는 음식을 선택해 주세요.
<select name="food" size=6 multiple>
<option value="김치찌게">김치찌게
<option value="된장찌게">된장찌게
<option value="해물탕">해물탕
<option value="짜장면">짜장면
<option value="짬뽕">짬뽕
<option value="피자">피자
<option value="냉면">냉면
</select>
<input type="button" value="선택" onclick="foods(this.form)">
</form>
<FORM>좋아하는 음식을 선택해 주세요.
<INPUT onclick="foods(this.form)" type="button" value="선택"> </FORM>예제2 실행화면 <script>
function colch(mirage) {
document.bgColor = mirage.color.options[mirage.color.selectedIndex].value
}
</script>
<form>
배경색바꾸기
<select name="color" size=5 onChange=colch(this.form)>
<option value="white">화이트
<option value="ivory">아이보리
<option value="lavender">라벤더
<option value="pink">핑크
<option value="lightblue">라이트블루
<option value="gold">골드
<option value="aqua">아쿠아
</select>
</form>
<FORM>배경색바꾸기
</FORM> - Option 객체
- Option 객체 만들기
option_name = new Option( optionText , optionValue , defaultSelected , selected )
optionText : 옵션 메뉴에 나타날 문자열
optionValue : 옵션 메뉴를 선택했을때 리턴되는 값
defaultSelected : 옵션 메뉴를 초기에 선택된 상태로 만들 것인지 아닌지를 지정
selected : 옵션 메뉴가 선택되어 있는지 아닌지를 가리킨다.예제3 실행화면 <script>
function mirage8(form) {
var option1 = new Option("자두","optiontest1",true)
form.test2.options[form.test2.length] = option1
}
function mirage9(form) {
if(form.test2.value != "") {
form.test2.options[form.test2.selectedIndex] = null
}
else {
alert("제거할 대상을 선택하세요")
}
}
</script>
<form>
<select name="test2" size=7>
<option value="optiontest1"> 사과
<option value="optiontest2"> 앵두
<option value="optiontest3"> 감
<option value="optiontest4"> 수박
</select>
<input type="button" value="추가" onclick="mirage8(this.form)">
<input type="button" value="제거" onclick="mirage9(this.form)">
</form>
<FORM> <INPUT onclick="mirage8(this.form)" type="button" value="추가"> <INPUT onclick="mirage9(this.form)" type="button" value="제거"> </FORM> - FileUpLoad 객체
- FileUpLoad 객체의 특성
특성 의미 name 파일업로드 입력양식 이름 value 파일업로드 입력양식에 입력된 파일이름 예제4 실행화면 <script>
function fileinfor(form) {
if(form.fileup.value != "") {
mirage = window.open("","","status=no,scrollbars=yes")
mirage.document.write("<img src=" + form.fileup.value + ">" )
}
else {
alert("이미지를 선택하세요")
}
}
</script>
<form name=form6>
이미지 파일보기<input type="file" name="fileup">
<input type="button" value="보기" onclick="fileinfor(this.form)">
</form>
<FORM name="form6">이미지 파일보기<INPUT type="file" name="fileup"> <INPUT onclick="fileinfor(this.form)" type="button" value="보기"> </FORM>
리스트박스를 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
그렇기 때문에 Select 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다
| 속성 | 의미 |
|---|---|
| name | 리스트박스의 이름지정 |
| size | 리스트박스에서 밖으로 보이는 목록의수 |
| value | 리스트 박스의 목록에 설정할 값 지정 |
| selected | 목록이 선택된 상태로 만든다. |
| multiple | 리스트 박스에서 하나이상 선택할 것인지를 지정 |