검색결과 리스트
글
자바스크립트 option
document.form.formname.options[0]=new Option('text값1','value값1');
document.form.formname.options[1]=new Option('text값2','value값2');
document.form.formname.options[2]=new Option('text값3','value값3');
다음과 같은거임!!
<option value="value값1"> text값1 </option>
<option value="value값2"> text값2 </option>
<option value="value값3"> text값3 </option>
[출처] JAVASCRIPT - new Option();|작성자 메멘토
넷스케이프 내비게이터 3.0붜는 자바스크립트에서 옵션 메뉴를 만들 수 있는 생성자 함수 Option()을 제공하기
시작하였다. 이 함수를 이용하면 자바스크립트에서 동적으로 옵션 메뉴가 만들어지게 되는 것이다.
option_name = new Option([optionText, optionValue, defaultSelected, selected[)
여기에서 optionText는 옵션 메뉴에 나타나는 문자열을 가리키고, optionValue는 이 옵션 메뉴를 선택했을 때 리
턴되는 값을 가리키게 된다.
EX :
<HTML>
<HEAD>
<TITLE>자바스크립트 테스트</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function appendOption1(form) {
var option1 = new Option("Option1", "1st_option", true)
form.test_select.options[1] = option1
}
function appendOption2(form) {
var option2 = new Option("Option2", "1st_option")
form.test_select.options[2] = option2
}
// 자바스크립트 끝 -->
</SCRIPT>
</HEAD>
<BODY>
<H1> 옵션 메뉴 추가 </H1><P>
<FORM>
<SELECT NAME="test_select" SIZE=5>
<OPTION VALUE="option_existed"> Option0
</SELECT><P>
<INPUT TYPE="button" VALUE="append Option1" onClick="appendOption1(this.form)">
<INPUT TYPE="button" VALUE="append Option2" onClick="appendOption2(this.form)">
</FORM>
</BODY>
</HTML>
<옵션 메뉴 삭제하기>
리스트 박스에서 옵션 메뉴를 삭제하는 것은 매우 간단하다. 삭제하고 싶은 곳에 있는 옵션 메뉴 값을 null로
만들어 버리게 되기 때문이다. 예를 들어 첫 번째 옵션 메뉴를 삭제 하고 싶다면 다음과 같이 하면된다.
selectName.options[0] = null
<옵션 메뉴 선택 상태 바꾸기>
현재 리스트 박스에 잇는 옵션 메뉴 중에서 현재 선택되어 있는 것을 바꾸는 방법에 대해 살펴보자. 먼저 오직
한 가지만 선택하는 단일 선택의 경우에는 다음과 같이 select 객체의 selectedIndex 값을 바꾸어주면
선택된 옵션 메뉴가 바뀌게 된다.
selectName.selectedIndex = I
두 번째로 MULTIPLE 속성을 사용하여 다중 속성으로 설정되어 있는 경우에는 옵션 객체의 selected 특성을
바꾸어 주면 된다. 예를 들어 i번째 옵션 메뉴가 선택되도록 만들고 싶다면 다음과 같이 하면된다.
selectName. options[i].selected = true
'개발 > 실전' 카테고리의 다른 글
iframe, target 에 대해서[펌] (0) | 2014.03.18 |
---|---|
getAttribute (0) | 2014.03.17 |
HEAD 에 들어가는 태그 (title, style, script, meta 태그) (0) | 2014.03.13 |
자바스크립트 - screen 객체와 document 객체 , link 객체와, anchor 객체 (0) | 2014.03.13 |
  &It &gy & " (0) | 2014.03.12 |