select 박스 제어하기
미리보기 : http://oxtag.com/html/ex/select20070412.html
<script type="text/javascript" language="javascript">
<!--
function selectChg(val) {
document.getElementById('test').value = val;
}
//-->
</script>
<select id = "test" name = "test">
<option value="한국" selected="selected">한국</option>
<option value="일본">일본</option>
<option value="중국">중국</option>
<option value="호주">호주</option>
</select>
<a href="javascript:selectChg('한국');">한국</a>
<a href="javascript:selectChg('일본');">일본</a>
<a href="javascript:selectChg('중국');">중국</a>
<a href="javascript:selectChg('호주');">호주</a>
또는..
<SCRIPT LANGUAGE="JavaScript">
<!--
function selectChg(val) {
document.getElementById('test').options[val].selected = true;
}
//-->
</SCRIPT>
<select id = "test" name = "test">
<option value="한국" selected="selected">한국</option>
<option value="일본">일본</option>
<option value="중국">중국</option>
<option value="호주">호주</option>
</select>
<a href="javascript:selectChg('0');">한국</a>
<a href="javascript:selectChg('1');">일본</a>
<a href="javascript:selectChg('2');">중국</a>
<a href="javascript:selectChg('3');">호주</a>
또는
<SCRIPT LANGUAGE="JavaScript">
<!--
function selectChg(val) {
var f = document.getElementById('test');
for (i=0; i<f.options.length; i++) {
if (f.options[i].value == val) { f.options[i].selected = true; }
}
}
//-->
</SCRIPT>
<select id = "test" name = "test">
<option value="한국" selected="selected">한국</option>
<option value="일본">일본</option>
<option value="중국">중국</option>
<option value="호주">호주</option>
</select>
<a href="javascript:selectChg('한국');">한국</a>
<a href="javascript:selectChg('일본');">일본</a>
<a href="javascript:selectChg('중국');">중국</a>
<a href="javascript:selectChg('호주');">호주</a>
또는
<SCRIPT LANGUAGE="JavaScript">
<!--
function selectChg(val) {
var f = document.getElementById('test');
for (i=0; i<f.options.length; i++) {
if (f[i].value == val) { f.selectedIndex = i; break;}
}
}
//-->
</SCRIPT>
<select id = "test" name = "test">
<option value="한국" selected="selected">한국</option>
<option value="일본">일본</option>
<option value="중국">중국</option>
<option value="호주">호주</option>
</select>
<a href="javascript:selectChg('한국');">한국</a>
<a href="javascript:selectChg('일본');">일본</a>
<a href="javascript:selectChg('중국');">중국</a>
<a href="javascript:selectChg('호주');">호주</a>
'인터넷정보' 카테고리의 다른 글
런타임으로 자바스크립트 화일 열기 (0) | 2007.10.11 |
---|---|
마우스 오버시 테이블 한줄 색깔 바꾸기 (0) | 2007.10.11 |
간단한 php 달력 (0) | 2007.10.11 |
php로 pop3 데몬을 만들기 (0) | 2007.10.11 |
페이징 함수 (0) | 2007.10.11 |
이미지 없이 모서리 없는 둥근 테이블 만들기 (0) | 2007.10.11 |
fsockopen으로 제작한 http확장클래스 (0) | 2007.10.11 |
3 of 9 바코드 그리기 (0) | 2007.10.11 |
HTML 4.01 엔티티(Entities) (0) | 2007.10.11 |
아파치 웹 서버 무단 링크 방지 (0) | 2007.10.11 |
select 태그 활용법 - 셀렉트박스, 콤보박스
<P>select 태그 예제
<SELECT>
<OPTGROUP LABEL="select1"> //option 을 그룹지움
<OPTION value="option1-1">option1-1</OPTION>
<OPTION value="option1-2">option1-2</OPTION>
<OPTION value="option1-3">option1-3</OPTION>
<OPTION value="option1-4">option1-4</OPTION>
</OPTGROUP>
<OPTGROUP LABEL="select2">
<OPTION value="option2-1">option2-1</OPTION>
<OPTION value="option2-2">option2-2</OPTION>
<OPTION value="option2-3">option2-3</OPTION>
</OPTGROUP>
<OPTGROUP LABEL="select3">
<OPTION value="option3-1">option3-1</OPTION>
<OPTION value="option3-2">option3-2</OPTION>
<OPTION value="option3-3">option3-3</OPTION>
<OPTION value="option3-4">option3-4</OPTION>
<OPTION value="option3-5">option3-5</OPTION>
<OPTION value="option3-6">option3-6</OPTION>
</OPTGROUP>
</SELECT>
</P>
'인터넷정보' 카테고리의 다른 글
fsockopen으로 제작한 http확장클래스 (0) | 2007.10.11 |
---|---|
3 of 9 바코드 그리기 (0) | 2007.10.11 |
HTML 4.01 엔티티(Entities) (0) | 2007.10.11 |
아파치 웹 서버 무단 링크 방지 (0) | 2007.10.11 |
insertAdjacentHTML 지정된 위치에 HTML 삽입 (0) | 2007.10.11 |
PHP에 포함된 변수 , 상수 , 함수 알아보기 (0) | 2007.10.11 |
file 버튼 이미지로 바꾸기 (0) | 2007.10.11 |
즐겨찾기 추가 , 시작페이지 설정 하는 스크립 (0) | 2007.10.11 |
오른쪽면에 배너 붙이는 style (0) | 2007.10.11 |
[PHP] 파일 확장자 추출 (0) | 2007.10.11 |
Select 메뉴의 border 숨기기
<html>
<head>
<title>제목없음</title>
<style type="text/css">
<!--
body { margin:0px; overflow:hidden; background-color:#f4f4f4; color:#000000; font-family:Arial,Helvetica; font-size:10px; }
.dropb {
font: normal 9px Small Fonts, VT100, Arial, Helvetica;
color: #505050;
border:2px solid #000000;
width: 115px;
}
--></style>
</head>
<body>
<div style="position:relative;margin-right:7px;width:117px;height:18px;border:1px solid #000000;background-color:#FFFFFF">
<div style="position: absolute;left:0px;top:-1px;width:115px;height:17px;clip:rect(2,113,15,2);">
<SELECT class="dropb">
<option value="" SELECTED>FRIENDLY LINKS
<option value="">- - - - - - - - - - - - - - - - - - - - - - - - - -
<option value="http://www.webarkstudio.com">WEBARKSTUDIO
<option value="http://www.copyrightmagazine.com">COPYRIGHTMAGAZINE
<option value="http://www.publircidad.com">PUBLIRCIDAD
<option value="http://www.e-site-es.com">E-SITE
<option value="http://www.creatiu.com">CREATIU
<option value="http://www.offf.org">OFFF
</select>
</div>
</div>
</body>
</html>
'인터넷정보' 카테고리의 다른 글
[PHP] 파일 확장자 추출 (0) | 2007.10.11 |
---|---|
[PHP] error_reporting , 에러 출력 설정 (0) | 2007.10.11 |
iframe 높이 자동 조절 - 아이프레임 사이즈 조절 (0) | 2007.10.11 |
IE의 검색엔진를 원하는 것으로 해보자 (0) | 2007.10.11 |
전화번호 자동 정리 - 전화번호 하이픈 넣기 (0) | 2007.10.11 |
마우스로 드래그되는 레이어창 스크립트 (0) | 2007.10.11 |
인쇄 미리 보기 및 페이지 설정 버튼 만드는 방법 (0) | 2007.10.11 |
PHP 테이블 중복 확인후 생성하기 create table if not exists board (0) | 2007.10.11 |
ActiveX 무조건 다운로드하기 (0) | 2007.10.11 |
이미지 크기 알아내기 (0) | 2007.10.11 |
select 용 함수 모음
function select_all(ta,bool){ //모든 option 선택
if(!ta){ return; }
for(var i=0,m=ta.length;i<m;i++){
ta.options[i].selected=bool;
}
}
function select_del(ta){ //선택된 option 삭제(멀티 가능)
if(ta.selectedIndex == -1){ return; }
var ol
for(var i=ta.length-1,m=0;i>=m;i--){
if(ta.options[i].selected){
ol = ta.options[i];
ta.removeChild(ol);
}
}
ta.focus();
}
function select_copy(ta,ta2){ //선택된 option 복사(멀티 가능)
if(ta.selectedIndex == -1){ return; }
for(var i=0,m=ta.length;i<m;i++){
if(ta.options[i].selected){
var ol = ta.options[i];
var ta_ol=ol.cloneNode(true)
ta2.appendChild(ta_ol);
}
}
ta.focus();
}
function select_remove(ta,ta2){ //선택된 옵션 이동(멀티 가능)
select_copy(ta,ta2);
select_del(ta);
}
function select_updown_sel(ta,type){ //1,2,3,4(맨위,위,아래,맨아래); //선택된 option 순서 바꾸기(멀티 불가)
var sel_len = ta.length
var sel_idx = ta.selectedIndex;
if(sel_idx==-1){alert!!('대상을 선택해주세요.'); return;}
if(type<3 && sel_idx==0 ){ alert!!('대상이 맨 위에있습니다'); return; }
if(type>2 && sel_idx==(sel_len-1) ){ alert!!('대상이 맨 아래에있습니다'); return; }
switch(type){
case 1:
select_goto(ta,sel_idx,0);
break;
case 2:
select_goto(ta,sel_idx,sel_idx-1);
break;
case 3:
select_goto(ta,sel_idx,sel_idx+1);
break;
case 4:
select_goto(ta,sel_idx,(sel_len-1));
break;
}
}
function select_goto(ta,st,ed){
var ta_num =-1;
var ol,ta_ol;
if(st<0 || ed<0 || st >=ta.length || ed >=ta.length ) return;
if(st<ed){
while(st<ed){
ta_num=st+1;
ol = ta.options[st].cloneNode(true);
ta_ol = ta.options[ta_num].cloneNode(true);
ta.options[ta_num]=new Option(ol.innerHTML,ol.value,false,true);
ta.options[st]=new Option(ta_ol.innerHTML,ta_ol.value,false,false);
st=ta_num;
}
}else if(st>ed){
while(st>ed){
ta_num=st-1;
ol = ta.options[st].cloneNode(true);
ta_ol = ta.options[ta_num].cloneNode(true);
ta.options[ta_num]=new Option(ol.innerHTML,ol.value,false,true);
ta.options[st]=new Option(ta_ol.innerHTML,ta_ol.value,false,false);
st=ta_num;
}
}
}
'인터넷정보' 카테고리의 다른 글
try{...} catch(e){...} 구문 , e.number,e.description (0) | 2007.10.11 |
---|---|
문자열 바이트 길이알기, 바이트만큼 자르기 (0) | 2007.10.11 |
API를 모와둔 사이트 gotapi.com (0) | 2007.10.11 |
PNG24 반투명 지원법 (IE용) (0) | 2007.10.11 |
JS 트리구조 메뉴 (0) | 2007.10.11 |
UTF-8로 바꾸는 법, 문자열 인코딩 바꾸기 (0) | 2007.10.11 |
IE7의 변경(오류,버그,바뀐점) (0) | 2007.10.11 |
이미지 없이 라운딩 박스 표현하기1 (0) | 2007.10.11 |
주민/외국인 등록번호 (0) | 2007.10.11 |
인터넷익스플로러7 자동다운로드 막는 프로그램.. (0) | 2007.10.11 |