홈페이지제작교실
홈페이지 제작기초
기본태그
태그팁모음
태그자료방
포토샵강좌
웹.관련강좌
PHP강좌
PHP팁
HTML.CSS
JAVASCRIPT
ASP
JSP
PHP심화
C.C++
플래시.ActionScript
자유게시판
질문게시판
유머게시판
오락실
Tel. 042-353-2371
평일 오전 9시 ~ 오후 7시
기업은행
010-8649-6758
예금주:제주사랑(송진아)
JAVASCRIPT
홈 > 홈페이지제작교실 > JAVASCRIPT
작성자
freewebkorea
카테고리
JavaScript
Tutorial
Object
비밀번호
제목
<H2>SELECT Element</H2> <P class=mtext>Select element는 선택하면 아래나 위로 펼쳐져 나오는 목록(펼침 목록이라고도 함.)의 최상위 element입니다. 아래의 DTD Table과 속성을 우선 보시겠습니다.</P><!-- dtd table 시작 --> <TABLE class=dtd width="100%"> <CAPTION class=general><B>legend</B> : <B>o</B>ptional, <B>f</B>orbidden, <B>e</B>mpty, <B>d</B>eprecated, <B>l</B>oose dtd, <B>f</B>rameset dtd [<A href="http://www.cadvance.org/doc/html/beginner/html_element.asp#dtd">표 보는 방법</A>] </CAPTION> <TBODY> <TR class=qlookttltr> <TD>element <TD>start tag <TD>end tag <TD>empty <TD>deprecated <TD>dtd <TR class=qlookvaluetr> <TD>SELECT <TD> <TD> <TD> <TD> <TD> <TR class=qlookvaluetr> <TD>OPTGROUP <TD> <TD> <TD> <TD> <TD> <TR class=qlookvaluetr> <TD>OPTION <TD> <TD>O <TD> <TD> <TD> </TD></TR></TBODY></TABLE><!-- dtd table 끝--><BR><BR><!-- 사용법 들어가는 테이블 시작 --> <TABLE class=attributeTbl cellSpacing=2 cellPadding=0 border=0> <TBODY> <TR> <TD class=titleCell colSpan=2>Select Element</TD></TR> <TR> <TD class=syntaxLeftCell>name</TD> <TD class=syntaxRightCell>Scripting 할 때 호출할 이름.</TD></TR> <TR> <TD class=syntaxLeftCell>multiple</TD> <TD class=syntaxRightCell>여러 개를 선택 할 수있게 할 때 사용 합니다. 이 속성을 사용하면 Drop down box가 생기지 않고 textarea 같은 스크롤 하는 box가 생깁니다.</TD></TR> <TR> <TD class=syntaxLeftCell>size</TD> <TD class=syntaxRightCell>행의 갯수를 지정합니다. Input element에서는 가로의 길이를 지정한 것과 다르져. 기본값이 1이기 대문에 size="1" 은 주나 마나고 2 이상이 되면 이 때 부터 multiple 과 같은 box가 생깁니다.</TD></TR> <TR> <TD class=syntaxLeftCell>disabled</TD> <TD class=syntaxRightCell>이 속성은 Input element 와 동일 하므로 좌측 메뉴의 Input Element를 참조하고, 거기까지 마우스 끌고가기 귀찮다면 <A href="http://www.cadvance.org/doc/java/object/form/input_element.asp#disabled">요기</A>를 누르시지효오~. 쬐끔 빠릅니다.</TD></TR></TBODY></TABLE><!-- 사용법 들어가는 테이블 끝--><BR><BR> <HR class=grayHr> <BR><B>OPTION Element</B> <P class=mtext>Option Element 는 Select Drop down box 에 들어갈 목록 들입니다. 맨 위의 DTD Table에서 End Tag이 O(Optional)로 표기되어 있습니다만, 반드시 End Tag으로 닫아주는 습관을 기르는게 멀지 않은 장래를 위해 좋답니다. <BR><BR>Option Element도 원래는 disabled라는 속성이 있는데 듣지않고, Label 속성으로 Drop down 항목의 이름을 표시하는데 역시 듣지 않아서 아래의 표에서는 빼겠습니다. 그럼 어떤 부분이 얼굴마담 역할을 하느냐 하면 <option>얼굴마담</option> 과 같이 Option Tag 속에 있는 문자가 목록에 나오게 됩니다.</P><!-- 사용법 들어가는 테이블 시작 --> <TABLE class=attributeTbl cellSpacing=2 cellPadding=0 border=0> <TBODY> <TR> <TD class=titleCell colSpan=2>Option Element</TD></TR> <TR> <TD class=syntaxLeftCellShort>value</TD> <TD class=syntaxRightCell>Scripting으로 선택된 값을 처리하는 실제 입력 값입니다.</TD></TR> <TR> <TD class=syntaxLeftCellShort>selected</TD> <TD class=syntaxRightCell>checkbox와 radio button 같이 문서가 출력되면서 Drop down box에 보여질 항목입니다. 마찬가지로 여러 항목에 사용하면 사용한 마지막 항목이 유효합니다.</TD></TR> <TR></TR></TBODY></TABLE><!-- 사용법 들어가는 테이블 끝--><BR><BR> <HR class=grayHr> <BR><B>Optgroup Element</B> <P class=mtext>Optgroup... 벌써 눈치가 따~악 오지 않습니까? 앞의 3글자 Opt 는 Option의 Opt 가 되겠습니다. 즉, Option group 이라는 뜻이져. 즉, 위의 Option Element 들을 group 별로 구분해 주는 역할을 합니다. 왜 때로는 그룹 별로 구분할 필요가 생기는지는 아래의 예제를 보면 금방 눈치 채실 겁니다.</P><!-- 사용법 들어가는 테이블 시작 --> <TABLE class=attributeTbl cellSpacing=2 cellPadding=0 border=0> <TBODY> <TR> <TD class=titleCell colSpan=2>Optgroup Element</TD></TR> <TR> <TD class=syntaxLeftCellShort>Label</TD> <TD class=syntaxRightCell>Drop down box 속에서 group 제목이 될 문자들이 값이 되져.</TD></TR></TBODY></TABLE><!-- 사용법 들어가는 테이블 끝--><BR><BR> <HR class=grayHr> <BR><B>예제 1</B><BR><BR><SELECT name=fiction> <OPTION selected>어느 회사의 부서별 과장, 차장 명단 - 먼저 등장하는 인물이 과장임... 실제 인물 아님...</OPTION> <OPTGROUP label=인사과> <OPTION value=인사한>인사한</OPTION> <OPTION value=인사해>인사해</OPTION> </OPTGROUP> <OPTGROUP label=자재과> <OPTION value=건자재>건자재</OPTION> <OPTION value=목자재>목자재</OPTION> </OPTGROUP> <OPTGROUP label=총무과> <OPTION value=총무기?>총무기?</OPTION> <OPTION value=총흉기!>총흉기!</OPTION> </OPTGROUP></SELECT><BR><!-- 입력 pre 시작 --><B class=pos>입력</B> <PRE class=input><form name="my_form"> <SPAN style="COLOR: #941919"><select name="fiction"></SPAN> <SPAN style="COLOR: #2e8b57"><option selected="selected"> 어느 회사의 부서별 과장, 차장 명단 - 먼저 등장하는 인물이 과장임... 실제 인물 아님... </option></SPAN> <SPAN style="COLOR: #0033cc"><optgroup label="인사과"></SPAN> <SPAN style="COLOR: #2e8b57"><option value="인사한">인사한</option> <option value="인사해">인사해</option></SPAN> <SPAN style="COLOR: #0033cc"></optgroup></SPAN> <SPAN style="COLOR: #0033cc"><optgroup label="자재과"></SPAN> <SPAN style="COLOR: #2e8b57"><option value="건자재">건자재</option> <option value="목자재">목자재</option></SPAN> <SPAN style="COLOR: #0033cc"></optgroup></SPAN> <SPAN style="COLOR: #0033cc"> <optgroup label="총무과"></SPAN> <SPAN style="COLOR: #2e8b57"><option value="총무기?">총무기?</option> <option value="총흉기!">총흉기!</option></SPAN> <SPAN style="COLOR: #0033cc"></optgroup></SPAN> <SPAN style="COLOR: #941919"></select></SPAN> </form> </PRE><!-- 입력 pre 끝--><BR> <HR class=grayHr> <BR><B>예제 2 - Multiple 사용</B><BR><BR><SELECT multiple size=10 name=fiction> <OPTION selected>어느 회사의 부서별 과장, 차장 명단 - 먼저 등장하는 인물이 과장임... 실제 인물 아님...</OPTION> <OPTGROUP label=인사과> <OPTION value=인사한>인사한</OPTION> <OPTION value=인사해>인사해</OPTION> </OPTGROUP> <OPTGROUP label=자재과> <OPTION value=건자재>건자재</OPTION> <OPTION value=목자재>목자재</OPTION> </OPTGROUP> <OPTGROUP label=총무과> <OPTION value=총무기?>총무기?</OPTION> <OPTION value=총흉기!>총흉기!</OPTION> </OPTGROUP></SELECT><BR><!-- 입력 pre 시작 --><B class=pos>입력</B> <PRE class=input><form name="my_form"> <SPAN style="COLOR: #941919"><select name="fiction" <B>multiple="multiple" size="10"</B>></SPAN> <SPAN style="COLOR: #2e8b57"><option selected="selected"> 어느 회사의 부서별 과장, 차장 명단 - 먼저 등장하는 인물이 과장임... 실제 인물 아님... </option></SPAN> <SPAN style="COLOR: #0033cc"><optgroup label="인사과"></SPAN> <SPAN style="COLOR: #2e8b57"><option value="인사한">인사한</option> <option value="인사해">인사해</option></SPAN> <SPAN style="COLOR: #0033cc"></optgroup></SPAN> <SPAN style="COLOR: #0033cc"><optgroup label="자재과"></SPAN> <SPAN style="COLOR: #2e8b57"><option value="건자재">건자재</option> <option value="목자재">목자재</option></SPAN> <SPAN style="COLOR: #0033cc"></optgroup></SPAN> <SPAN style="COLOR: #0033cc"> <optgroup label="총무과"></SPAN> <SPAN style="COLOR: #2e8b57"><option value="총무기?">총무기?</option> <option value="총흉기!">총흉기!</option></SPAN> <SPAN style="COLOR: #0033cc"></optgroup></SPAN> <SPAN style="COLOR: #941919"></select></SPAN> </form> </PRE><!-- 입력 pre 끝--> <P class=mtext>위의 Multiple 사용 예제에서는 전체 항목이 제목 포함해서 10개 이므로 size="10"으로 해서 스크롤을 아예 생기지 않게 지정했는데 10 이하의 값을 주면 스크롤바가 생깁니다. 의심이 나시면 위의 소스를 복사한 다음 코드 실행기에서 실행해 보시져...^^ 제 생각이지만 아주 많은 항목이 아니라면 스크롤이 없는게 나을 듯 싶군요.<BR><BR>위의 예제에서 사용한 Multiple 속성은 여러개를 선택할 수 있습니다. 연달아 있는 항목을 선택하려면 일단 1개의 항목을 선택한 후 shift key를 누른 상태에서 한 꺼번에 여러개를 선택하면 되고, 떨어져 있는 항목을 선택하려면 마찬 가지로 먼저 1개의 항목을 선택한 후 Ctrl key를 누른 상태에서 선택합니다.</P><BR> <HR class=blackHr>
<H2>SELECT Element</H2> <P class=mtext>Select element는 선택하면 아래나 위로 펼쳐져 나오는 목록(펼침 목록이라고도 함.)의 최상위 element입니다. 아래의 DTD Table과 속성을 우선 보시겠습니다.</P><!-- dtd table 시작 --> <TABLE class=dtd width="100%"> <CAPTION class=general><B>legend</B> : <B>o</B>ptional, <B>f</B>orbidden, <B>e</B>mpty, <B>d</B>eprecated, <B>l</B>oose dtd, <B>f</B>rameset dtd [<A href="http://www.cadvance.org/doc/html/beginner/html_element.asp#dtd">표 보는 방법</A>] </CAPTION> <TBODY> <TR class=qlookttltr> <TD>element <TD>start tag <TD>end tag <TD>empty <TD>deprecated <TD>dtd <TR class=qlookvaluetr> <TD>SELECT <TD> <TD> <TD> <TD> <TD> <TR class=qlookvaluetr> <TD>OPTGROUP <TD> <TD> <TD> <TD> <TD> <TR class=qlookvaluetr> <TD>OPTION <TD> <TD>O <TD> <TD> <TD> </TD></TR></TBODY></TABLE><!-- dtd table 끝--><BR><BR><!-- 사용법 들어가는 테이블 시작 --> <TABLE class=attributeTbl cellSpacing=2 cellPadding=0 border=0> <TBODY> <TR> <TD class=titleCell colSpan=2>Select Element</TD></TR> <TR> <TD class=syntaxLeftCell>name</TD> <TD class=syntaxRightCell>Scripting 할 때 호출할 이름.</TD></TR> <TR> <TD class=syntaxLeftCell>multiple</TD> <TD class=syntaxRightCell>여러 개를 선택 할 수있게 할 때 사용 합니다. 이 속성을 사용하면 Drop down box가 생기지 않고 textarea 같은 스크롤 하는 box가 생깁니다.</TD></TR> <TR> <TD class=syntaxLeftCell>size</TD> <TD class=syntaxRightCell>행의 갯수를 지정합니다. Input element에서는 가로의 길이를 지정한 것과 다르져. 기본값이 1이기 대문에 size="1" 은 주나 마나고 2 이상이 되면 이 때 부터 multiple 과 같은 box가 생깁니다.</TD></TR> <TR> <TD class=syntaxLeftCell>disabled</TD> <TD class=syntaxRightCell>이 속성은 Input element 와 동일 하므로 좌측 메뉴의 Input Element를 참조하고, 거기까지 마우스 끌고가기 귀찮다면 <A href="http://www.cadvance.org/doc/java/object/form/input_element.asp#disabled">요기</A>를 누르시지효오~. 쬐끔 빠릅니다.</TD></TR></TBODY></TABLE><!-- 사용법 들어가는 테이블 끝--><BR><BR> <HR class=grayHr> <BR><B>OPTION Element</B> <P class=mtext>Option Element 는 Select Drop down box 에 들어갈 목록 들입니다. 맨 위의 DTD Table에서 End Tag이 O(Optional)로 표기되어 있습니다만, 반드시 End Tag으로 닫아주는 습관을 기르는게 멀지 않은 장래를 위해 좋답니다. <BR><BR>Option Element도 원래는 disabled라는 속성이 있는데 듣지않고, Label 속성으로 Drop down 항목의 이름을 표시하는데 역시 듣지 않아서 아래의 표에서는 빼겠습니다. 그럼 어떤 부분이 얼굴마담 역할을 하느냐 하면 <option>얼굴마담</option> 과 같이 Option Tag 속에 있는 문자가 목록에 나오게 됩니다.</P><!-- 사용법 들어가는 테이블 시작 --> <TABLE class=attributeTbl cellSpacing=2 cellPadding=0 border=0> <TBODY> <TR> <TD class=titleCell colSpan=2>Option Element</TD></TR> <TR> <TD class=syntaxLeftCellShort>value</TD> <TD class=syntaxRightCell>Scripting으로 선택된 값을 처리하는 실제 입력 값입니다.</TD></TR> <TR> <TD class=syntaxLeftCellShort>selected</TD> <TD class=syntaxRightCell>checkbox와 radio button 같이 문서가 출력되면서 Drop down box에 보여질 항목입니다. 마찬가지로 여러 항목에 사용하면 사용한 마지막 항목이 유효합니다.</TD></TR> <TR></TR></TBODY></TABLE><!-- 사용법 들어가는 테이블 끝--><BR><BR> <HR class=grayHr> <BR><B>Optgroup Element</B> <P class=mtext>Optgroup... 벌써 눈치가 따~악 오지 않습니까? 앞의 3글자 Opt 는 Option의 Opt 가 되겠습니다. 즉, Option group 이라는 뜻이져. 즉, 위의 Option Element 들을 group 별로 구분해 주는 역할을 합니다. 왜 때로는 그룹 별로 구분할 필요가 생기는지는 아래의 예제를 보면 금방 눈치 채실 겁니다.</P><!-- 사용법 들어가는 테이블 시작 --> <TABLE class=attributeTbl cellSpacing=2 cellPadding=0 border=0> <TBODY> <TR> <TD class=titleCell colSpan=2>Optgroup Element</TD></TR> <TR> <TD class=syntaxLeftCellShort>Label</TD> <TD class=syntaxRightCell>Drop down box 속에서 group 제목이 될 문자들이 값이 되져.</TD></TR></TBODY></TABLE><!-- 사용법 들어가는 테이블 끝--><BR><BR> <HR class=grayHr> <BR><B>예제 1</B><BR><BR><SELECT name=fiction> <OPTION selected>어느 회사의 부서별 과장, 차장 명단 - 먼저 등장하는 인물이 과장임... 실제 인물 아님...</OPTION> <OPTGROUP label=인사과> <OPTION value=인사한>인사한</OPTION> <OPTION value=인사해>인사해</OPTION> </OPTGROUP> <OPTGROUP label=자재과> <OPTION value=건자재>건자재</OPTION> <OPTION value=목자재>목자재</OPTION> </OPTGROUP> <OPTGROUP label=총무과> <OPTION value=총무기?>총무기?</OPTION> <OPTION value=총흉기!>총흉기!</OPTION> </OPTGROUP></SELECT><BR><!-- 입력 pre 시작 --><B class=pos>입력</B> <PRE class=input><form name="my_form"> <SPAN style="COLOR: #941919"><select name="fiction"></SPAN> <SPAN style="COLOR: #2e8b57"><option selected="selected"> 어느 회사의 부서별 과장, 차장 명단 - 먼저 등장하는 인물이 과장임... 실제 인물 아님... </option></SPAN> <SPAN style="COLOR: #0033cc"><optgroup label="인사과"></SPAN> <SPAN style="COLOR: #2e8b57"><option value="인사한">인사한</option> <option value="인사해">인사해</option></SPAN> <SPAN style="COLOR: #0033cc"></optgroup></SPAN> <SPAN style="COLOR: #0033cc"><optgroup label="자재과"></SPAN> <SPAN style="COLOR: #2e8b57"><option value="건자재">건자재</option> <option value="목자재">목자재</option></SPAN> <SPAN style="COLOR: #0033cc"></optgroup></SPAN> <SPAN style="COLOR: #0033cc"> <optgroup label="총무과"></SPAN> <SPAN style="COLOR: #2e8b57"><option value="총무기?">총무기?</option> <option value="총흉기!">총흉기!</option></SPAN> <SPAN style="COLOR: #0033cc"></optgroup></SPAN> <SPAN style="COLOR: #941919"></select></SPAN> </form> </PRE><!-- 입력 pre 끝--><BR> <HR class=grayHr> <BR><B>예제 2 - Multiple 사용</B><BR><BR><SELECT multiple size=10 name=fiction> <OPTION selected>어느 회사의 부서별 과장, 차장 명단 - 먼저 등장하는 인물이 과장임... 실제 인물 아님...</OPTION> <OPTGROUP label=인사과> <OPTION value=인사한>인사한</OPTION> <OPTION value=인사해>인사해</OPTION> </OPTGROUP> <OPTGROUP label=자재과> <OPTION value=건자재>건자재</OPTION> <OPTION value=목자재>목자재</OPTION> </OPTGROUP> <OPTGROUP label=총무과> <OPTION value=총무기?>총무기?</OPTION> <OPTION value=총흉기!>총흉기!</OPTION> </OPTGROUP></SELECT><BR><!-- 입력 pre 시작 --><B class=pos>입력</B> <PRE class=input><form name="my_form"> <SPAN style="COLOR: #941919"><select name="fiction" <B>multiple="multiple" size="10"</B>></SPAN> <SPAN style="COLOR: #2e8b57"><option selected="selected"> 어느 회사의 부서별 과장, 차장 명단 - 먼저 등장하는 인물이 과장임... 실제 인물 아님... </option></SPAN> <SPAN style="COLOR: #0033cc"><optgroup label="인사과"></SPAN> <SPAN style="COLOR: #2e8b57"><option value="인사한">인사한</option> <option value="인사해">인사해</option></SPAN> <SPAN style="COLOR: #0033cc"></optgroup></SPAN> <SPAN style="COLOR: #0033cc"><optgroup label="자재과"></SPAN> <SPAN style="COLOR: #2e8b57"><option value="건자재">건자재</option> <option value="목자재">목자재</option></SPAN> <SPAN style="COLOR: #0033cc"></optgroup></SPAN> <SPAN style="COLOR: #0033cc"> <optgroup label="총무과"></SPAN> <SPAN style="COLOR: #2e8b57"><option value="총무기?">총무기?</option> <option value="총흉기!">총흉기!</option></SPAN> <SPAN style="COLOR: #0033cc"></optgroup></SPAN> <SPAN style="COLOR: #941919"></select></SPAN> </form> </PRE><!-- 입력 pre 끝--> <P class=mtext>위의 Multiple 사용 예제에서는 전체 항목이 제목 포함해서 10개 이므로 size="10"으로 해서 스크롤을 아예 생기지 않게 지정했는데 10 이하의 값을 주면 스크롤바가 생깁니다. 의심이 나시면 위의 소스를 복사한 다음 코드 실행기에서 실행해 보시져...^^ 제 생각이지만 아주 많은 항목이 아니라면 스크롤이 없는게 나을 듯 싶군요.<BR><BR>위의 예제에서 사용한 Multiple 속성은 여러개를 선택할 수 있습니다. 연달아 있는 항목을 선택하려면 일단 1개의 항목을 선택한 후 shift key를 누른 상태에서 한 꺼번에 여러개를 선택하면 되고, 떨어져 있는 항목을 선택하려면 마찬 가지로 먼저 1개의 항목을 선택한 후 Ctrl key를 누른 상태에서 선택합니다.</P><BR> <HR class=blackHr>
첨부파일
견적계산하기
작업의뢰
견적문의
공지사항
