일상생활

[HTML/JavaScript] Select list move options

개발/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
저작자표시 (새창열림)

'개발 > 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 추가 삭제 예제

개발/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>

저작자표시 (새창열림)

'개발 > 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

[javascript] select box

개발/Javascript2009. 2. 16. 19:02

매번 까먹는다.
한번 쓸때는 이제 알겠지 하면서 어제 썼던걸 오늘 또 찾게 된다.


<select id='selectbox'>
<option value="1">사과</option>
<option value="2">배</option>
<option value="3">포도</option>
<option value="4">귤</option>
<option value="5">자두</option>
</select>


text 값 가져오기
<script language="javascript">
     var obj = document.getElementById('selectbox');
     var text = obj.options[obj.selectedIndex].text;
     alert(text); 
</script>


value 값 가져오기
<script language="javascript">
var obj = document.getElementById(''selectbox'');
var value = obj.options[obj.selectedIndex].value;
alert(value);
</script>
저작자표시 (새창열림)

'개발 > Javascript' 카테고리의 다른 글

[Event] observe 에서의 onload와 dom:loaded 의 차이  (0) 2009.05.21
[IE8] 웹 표준 개발자의 IE8 웹사이트 호환성 대응  (0) 2009.04.13
[HTML] 제어 문자  (0) 2009.01.16
[HTML 팁] HTML 소스 정렬 사이트  (0) 2008.12.27
[tip] 영문 alert 메세지  (0) 2008.09.25

티스토리툴바