select 박스 제어하기

인터넷관련 2008. 2. 16. 12:54

미리보기 : 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) 2008.02.16
마우스 오버시 테이블 한줄 색깔 바꾸기  (0) 2008.02.16
간단한 php 달력  (0) 2008.02.16
php로 pop3 데몬을 만들기  (0) 2008.02.16
이미지 없이 모서리 없는 둥근 테이블 만들기  (0) 2008.02.16
fsockopen으로 제작한 http확장클래스  (0) 2008.02.16
HTML 4.01 엔티티(Entities)  (0) 2008.02.16
페이징 함수  (0) 2008.02.16
Posted by 알 수 없는 사용자
,

select 태그 활용법 - 셀렉트박스, 콤보박스

인터넷관련 2008. 2. 16. 12:44

<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>

'인터넷관련' 카테고리의 다른 글

오른쪽면에 배너 붙이는 style  (0) 2008.02.16
[PHP] 파일 확장자 추출  (0) 2008.02.16
[PHP] error_reporting , 에러 출력 설정  (0) 2008.02.16
iframe 높이 자동 조절 - 아이프레임 사이즈 조절  (0) 2008.02.16
IE의 검색엔진를 원하는 것으로 해보자  (0) 2008.02.16
전화번호 자동 정리 - 전화번호 하이픈 넣기  (0) 2008.02.16
Select 메뉴의 border 숨기기  (0) 2008.02.16
마우스로 드래그되는 레이어창 스크립트  (0) 2008.02.16
Posted by 알 수 없는 사용자
,

Select 메뉴의 border 숨기기

인터넷관련 2008. 2. 16. 12:43

<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>

'인터넷관련' 카테고리의 다른 글

iframe 높이 자동 조절 - 아이프레임 사이즈 조절  (0) 2008.02.16
select 태그 활용법 - 셀렉트박스, 콤보박스  (0) 2008.02.16
IE의 검색엔진를 원하는 것으로 해보자  (0) 2008.02.16
전화번호 자동 정리 - 전화번호 하이픈 넣기  (0) 2008.02.16
마우스로 드래그되는 레이어창 스크립트  (0) 2008.02.16
인쇄 미리 보기 및 페이지 설정 버튼 만드는 방법  (0) 2008.02.16
PHP 테이블 중복 확인후 생성하기 create table if not exists board  (0) 2008.02.16
이미지 크기 알아내기  (0) 2008.02.16
Posted by 알 수 없는 사용자
,

select 용 함수 모음

인터넷관련 2008. 2. 15. 13:50
//------------------------------------------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;
   }
  }
 }

'인터넷관련' 카테고리의 다른 글

문자열 바이트 길이알기, 바이트만큼 자르기  (0) 2008.02.15
API를 모와둔 사이트 gotapi.com  (0) 2008.02.15
PNG24 반투명 지원법 (IE용)  (0) 2008.02.15
JS 트리구조 메뉴  (0) 2008.02.15
UTF-8로 바꾸는 법, 문자열 인코딩 바꾸기  (0) 2008.02.15
IE7의 변경(오류,버그,바뀐점)  (0) 2008.02.15
이미지 없이 라운딩 박스 표현하기1  (0) 2008.02.15
주민/외국인 등록번호  (0) 2008.02.15
Posted by 알 수 없는 사용자
,

티스토리툴바