캠핑과 개발

[HTML/JavaScript] Select list move options

DEVELOPMENT/Javascript2009. 8. 11. 14:12

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
 <TITLE> New Document </TITLE>
 <script language="JavaScript" type="text/javascript">
 <!--
 var NS4 = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) < 5);
 
 /**
 * option 추가
 **/
 function addOption(theSel, theText, theValue){
  var newOpt = new Option(theText, theValue);
  var selLength = theSel.length;
  theSel.options[selLength] = newOpt;
 }
 /**
 * option 삭제
 **/
 function deleteOption(theSel, theIndex){
  var selLength = theSel.length;
  if(selLength>0){
   theSel.options[theIndex] = null;
  }
 }
 
 /**
 * option 삭제
 **/
 function moveOptions(theSelFrom, theSelTo){
  
  var selLength = theSelFrom.length;
  var selectedText = new Array();
  var selectedValues = new Array();
  var selectedCount = 0;
  
  var i;
  
  // Find the selected Options in reverse order
  // and delete them from the 'from' Select.
  for(i=selLength-1; i>=0; i--){
   if(theSelFrom.options[i].selected){
    selectedText[selectedCount] = theSelFrom.options[i].text;
    selectedValues[selectedCount] = theSelFrom.options[i].value;
    deleteOption(theSelFrom, i);
    selectedCount++;
   }
  }
  
  // Add the selected text/values in reverse order.
  // This will add the Options to the 'to' Select
  // in the same order as they were in the 'from' Select.
  for(i=selectedCount-1; i>=0; i--){
   addOption(theSelTo, selectedText[i], selectedValues[i]);
  }
  
  if(NS4) history.go(0);
 }
 //-->
 </script>
 </HEAD>
 <BODY>
<form action="yourpage.asp" method="post">
<table border="0">
 <tr>
  <td>
   <select name="sel1" size="10" multiple="multiple">
   <option value="1">Left1</option>
   <option value="2">Left2</option>
   <option value="3">Left3</option>
   <option value="4">Left4</option>
   <option value="5">Left5</option>
   </select>
  </td>
  <td align="center" valign="middle">
   <input type="button" value="--&gt;"
    onclick="moveOptions(this.form.sel1, this.form.sel2);" /><br />
   <input type="button" value="&lt;--"
    onclick="moveOptions(this.form.sel2, this.form.sel1);" />
  </td>
  <td>
   <select name="sel2" size="10" multiple="multiple">
   <option value="1">Right1</option>
   <option value="2">Right2</option>
   <option value="3">Right3</option>
   <option value="4">Right4</option>
   <option value="5">Right5</option>
   </select>
  </td>
 </tr>
</table>
</form>
 </BODY>
</HTML>

출처 : http://www.mredkj.com/tutorials/tutorial_mixed2b.html
저작자표시

'DEVELOPMENT > Javascript' 카테고리의 다른 글

[javascript] 바탕화면에 사이트 바로가기 만들기  (0) 2009.09.15
[prototype.js] Element 생성하기  (0) 2009.09.09
[HTML/JavaScript ]select box option 추가 삭제 예제  (0) 2009.08.11
HTML 특수문자코드표  (0) 2009.07.22
[Event] observe 에서의 onload와 dom:loaded 의 차이  (0) 2009.05.21

[HTML/JavaScript ]select box option 추가 삭제 예제

DEVELOPMENT/Javascript2009. 8. 11. 13:56

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
 <TITLE> New Document </TITLE>
 <META NAME="Generator" CONTENT="EditPlus">
 <META NAME="Author" CONTENT="">
 <META NAME="Keywords" CONTENT="">
 <META NAME="Description" CONTENT="">
 <script language="JavaScript" type="text/javascript">
 <!--
 var count1 = 0;
 var count2 = 0;
 /**
 * 선택된 option의 이전에 새로운 option 을 추가한다.
 **/
 function insertOptionBefore(num){
  var elSel = document.getElementById('selectX');
  if(elSel.selectedIndex >= 0) {
   var elOptNew = document.createElement('option');
   elOptNew.text = 'Insert' + num;
   elOptNew.value = 'insert' + num;
   var elOptOld = elSel.options[elSel.selectedIndex]; 
   try {
    elSel.add(elOptNew, elOptOld); // standards compliant; doesn't work in IE
   }catch(ex){
    elSel.add(elOptNew, elSel.selectedIndex); // IE only
   }
  }
 }
 /**
 * 선택된 옵션을 삭제한다.
 **/
 function removeOptionSelected(){
  var elSel = document.getElementById('selectX');
  var i;
  for (i = elSel.length - 1; i>=0; i--) {
   if (elSel.options[i].selected) {
    elSel.remove(i);
   }
  }
 }
 /**
 * 마지막에 새로운 option을 추가한다.
 **/
 function appendOptionLast(num){
  var elOptNew = document.createElement('option');
  elOptNew.text = 'Append' + num;
  elOptNew.value = 'append' + num;
  var elSel = document.getElementById('selectX');
  try {
   elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
  }catch(ex) {
   elSel.add(elOptNew); // IE only
  }
 }
 /**
 * 마지막 옵션을 삭제한다.
 **/
 function removeOptionLast(){
  var elSel = document.getElementById('selectX');
  if (elSel.length > 0){
   elSel.remove(elSel.length - 1);
  }
 }
 //-->
 </script>
 </HEAD>
<BODY>
<form>
 <input type="button" value="이전 추가" onclick="insertOptionBefore(count1++);" />Insert Before Selected<br />
 <input type="button" value="삭제" onclick="removeOptionSelected();" />Remove Selected<br />
 <select id="selectX" size="10">
  <option value="original1" selected="selected">Orig1</option>
  <option value="original2">Orig2</option>
 </select>
 <br />
 <input type="button" value="마지막 추가" onclick="appendOptionLast(count2++);" />Append Last<br />
 <input type="button" value="마지막 삭제" onclick="removeOptionLast();" />Remove Last
</form>
</BODY>
</HTML>

저작자표시

'DEVELOPMENT > Javascript' 카테고리의 다른 글

[prototype.js] Element 생성하기  (0) 2009.09.09
[HTML/JavaScript] Select list move options  (0) 2009.08.11
HTML 특수문자코드표  (0) 2009.07.22
[Event] observe 에서의 onload와 dom:loaded 의 차이  (0) 2009.05.21
[IE8] 웹 표준 개발자의 IE8 웹사이트 호환성 대응  (0) 2009.04.13

HTML 특수문자코드표

DEVELOPMENT/Javascript2009. 7. 22. 13:23

표현문자

숫자표현

문자표현

설명

-

&#00;-&#08;

-

사용하지 않음

space

&#09;

-

수평탭

space

&#10;

-

줄 삽입

-

&#11;-&#31;

-

사용하지 않음

space

&#32;

-

여백

!

&#33;

-

느낌표

"

&#34;

&quot;

따옴표

#

&#35;

-

숫자기호

$

&#36;

-

달러

%

&#37;

-

백분율 기호

&

&#38;

&amp;

Ampersand

'

&#39;

-

작은 따옴표

(

&#40;

-

왼쪽 괄호

)

&#41;

-

오른쪽 괄호

*

&#42;

-

아스트릭

+

&#43;

-

더하기 기호

,

&#44;

-

쉼표

-

&#45;

-

Hyphen

.

&#46;

-

마침표

/

&#47;

-

Solidus (slash)

0 - 9

&#48;-&#57;

-

0부터 9까지

:

&#58;

-

콜론

;

&#59;

-

세미콜론

<

&#60;

&lt;

보다 작은

=

&#61;

-

등호

>

&#62;

&gt;

보다 큰

?

&#63;

-

물음표

@

&#64;

-

Commercial at

A - Z

&#65;-&#90;

-

A부터 Z까지

[

&#91;

-

왼쪽 대괄호

\

&#92;

-

역슬래쉬

]

&#93;

-

오른쪽 대괄호

^

&#94;

-

탈자부호

_

&#95;

-

수평선

`

&#96;

-

Acute accent

a - z

&#97;-&#122;

-

a부터 z까지

{

&#123;

-

왼쪽 중괄호

|

&#124;

-

수직선

}

&#125;

-

오른쪽 중괄호

~

&#126;

-

꼬리표

-

&#127;-&#159;

-

사용하지 않음

&#160;

&nbsp;

Non-breaking space

¡

&#161;

&iexcl;

거꾸로된 느낌표

￠

&#162;

&cent;

센트 기호

￡

&#163;

&pound;

파운드

¤

&#164;

&curren;

현재 환율

￥

&#165;

&yen;

엔

|

&#166;

&brvbar;

끊어진 수직선

§

&#167;

&sect;

섹션 기호

¨

&#168;

&uml;

움라우트

ⓒ

&#169;

&copy;

저작권

ª

&#170;

&ordf;

Feminine ordinal

≪

&#171;

&laquo;

왼쪽 꺾인 괄호

￢

&#172;

&not;

부정

­

&#173;

&shy;

Soft hyphen

?

&#174;

&reg;

등록상표

&hibar;

&#175;

&macr;

Macron accent

°

&#176;

&deg;

Degree sign

±

&#177;

&plusmn;

Plus or minus

²

&#178;

&sup2;

Superscript two

³

&#179;

&sup3;

Superscript three

´

&#180;

&acute;

Acute accent

μ

&#181;

&micro;

Micro sign (Mu)

&#182;

&para;

문단기호

·

&#183;

&middot;

Middle dot

¸

&#184;

&cedil;

Cedilla

¹

&#185;

&sup1;

Superscript one

º

&#186;

&ordm;

Masculine ordinal

≫

&#187;

&raquo;

오른쪽 꺾인 괄호

¼

&#188;

&frac14;

4분의 1

½

&#189;

&frac12;

2분의 1

¾

&#190;

&frac34;

4분의 3

¿

&#191;

&iquest;

거꾸로된 물음표

A

&#192;

&Agrave;

Capital A, grave accent

A

&#193;

&Aacute;

Capital A, acute accent

A

&#194;

&Acirc;

Capital A, circumflex accent

A

&#195;

&Atilde;

Capital A, tilde

A

&#196;

&Auml;

Capital A, dieresis or umlaut mark

A

&#197;

&Aring;

Capital A, ring (Angstrom)

Æ

&#198;

&AElig;

Capital AE diphthong (ligature)

C

&#199;

&Ccedil;

Capital C, cedilla

E

&#200;

&Egrave;

Capital E, grave accent

E

&#201;

&Eacute;

Capital E, acute accent

E

&#202;

&Ecirc;

Capital E, circumflex accent

E

&#203;

&Euml;

Capital E, dieresis or umlaut mark

I

&#204;

&Igrave;

Capital I, grave accent

I

&#205;

&Iacute;

Capital I, acute accent

I

&#206;

&Icirc;

Capital I, circumflex accent

I

&#207;

&Iuml;

Capital I, dieresis or umlaut mark

Ð

&#208;

&ETH;

Capital Eth, Icelandic

N

&#209;

&Ntilde;

Capital N, tilde

O

&#210;

&Ograve;

Capital O, grave accent

O

&#211;

&Oacute;

Capital O, acute accent

O

&#212;

&Ocirc;

Capital O, circumflex accent

O

&#213;

&Otilde;

Capital O, tilde

O

&#214;

&Ouml;

Capital O, dieresis or umlaut mark

×

&#215;

&times;

Multiply sign

Ø

&#216;

&Oslash;

width="130"Capital O, slash

U

&#217;

&Ugrave;

Capital U, grave accent

U

&#218;

&Uacute;

Capital U, acute accent

U

&#219;

&Ucirc;

Capital U, circumflex accent

U

&#220;

&Uuml;

Capital U, dieresis or umlaut mark

Y

&#221;

&Yacute;

Capital Y, acute accent

Þ

&#222;

&THORN;

Capital Thorn, Icelandic

ß

&#223;

&szlig;

Small sharp s, German (sz ligature)

a

&#224;

&agrave;

Small a, grave accent

a

&#225;

&aacute;

Small a, acute accent

a

&#226;

&acirc;

Small a, circumflex accent

a

&#227;

&atilde;

Small a, tilde

a

&#228;

&auml;

Small a, dieresis or umlaut mark

a

&#229;

&aring;

Small a, ring

æ

&#230;

&aelig;

Small ae diphthong (ligature)

c

&#231;

&ccedil;

Small c, cedilla

e

&#232;

&egrave;

Small e, grave accent

e

&#233;

&eacute;

Small e, acute accent

e

&#234;

&ecirc;

Small e, circumflex accent

e

&#235;

&euml;

Small e, dieresis or umlaut mark

i

&#236;

&igrave;

Small i, grave accent

i

&#237;

&iacute;

Small i, acute accent

i

&#238;

&icirc;

Small i, circumflex accent

i

&#239;

&iuml;

Small i, dieresis or umlaut mark

ð

&#240;

&eth;

Small eth, Icelandic

n

&#241;

&ntilde;

Small n, tilde

o

&#242;

&ograve;

Small o, grave accent

o

&#243;

&oacute;

Small o, acute accent

o

&#244;

&ocirc;

Small o, circumflex accent

o

&#245;

&otilde;

Small o, tilde

o

&#246;

&ouml;

Small o, dieresis or umlaut mark

÷

&#247;

&divide;

Division sign

ø

&#248;

&oslash;

Small o, slash

u

&#249;

&ugrave;

Small u, grave accent

u

&#250;

&uacute;

Small u, acute accent

u

&#251;

&ucirc;

Small u, circumflex accent

u

&#252;

&uuml;

Small u, dieresis or umlaut mark

y

&#253;

&yacute;

Small y, acute accent

þ

&#254;

&thorn;

Small thorn, Icelandic

y

&#255;

&yuml;

Small y, dieresis or umlaut mark

저작자표시

'DEVELOPMENT > Javascript' 카테고리의 다른 글

[HTML/JavaScript] Select list move options  (0) 2009.08.11
[HTML/JavaScript ]select box option 추가 삭제 예제  (0) 2009.08.11
[Event] observe 에서의 onload와 dom:loaded 의 차이  (0) 2009.05.21
[IE8] 웹 표준 개발자의 IE8 웹사이트 호환성 대응  (0) 2009.04.13
[javascript] select box  (0) 2009.02.16

티스토리툴바