js 제어 select 표 단자 노드 좌우 상하 이동
1. js 코드
/**
* @ select js
* @ md_java
* @ 2010-6-20
*/
var fromsob,toobj,froms,arry,nowIndex,newoption;
/**
* @
* @ formselect select;toselect select,postionstr left OR right
* @
*/
function moveoption(formselect,toselect,postionstr){
fromsobj=document.getElementById(formselect);
toobj=document.getElementById(toselect);
if(postionstr=='left'&&fromsobj.options.length==0){//
alert('left is empty');
return;
}else if(postionstr=='right'&&fromsobj.options.length==0){//
alert('right is empty');
return;
}
if(postionstr=='left'&&fromsobj.options.selectedIndex==-1){//
alert('please choose left');
return;
}else if(postionstr=='right'&&fromsobj.options.selectedIndex==-1){//
alert('please choose right');
return;
}
froms=fromsobj.options;// select opations
arry=new Array();
var arr=0;
for(var i=0;i<froms.length;i++){
if(froms[i].selected==true){
nowIndex = toobj.options.length; // toselect options
newoption = new Option(froms[i].text, froms[i].value,false,false);//copy option
toobj.options[nowIndex] = newoption;
fromsobj
arry[arr]=froms[i];//
arr++;
}
}
// option
for(var a=0;a<arry.length;a++){
fromsobj.options[arry[a].index]=null;
}
}
/**
* @ option
* @ formselect select;toselect select,postionstr left OR right
* @
*/
function giveOrUndoAll(formselect,toselect,postionstr){
fromsobj=document.getElementById(formselect);
toobj=document.getElementById(toselect);
if(postionstr=='left'&&fromsobj.options.length==0){
alert('left is empty');
return;
}
if(postionstr=='right'&&fromsobj.options.length==0){
alert('right is empty');
return;
}
froms=fromsobj.options;
for(var i=0;i<froms.length;i++){
nowIndex = toobj.options.length;
newoption = new Option(froms[i].text, froms[i].value,false,false);
toobj.options[nowIndex] = newoption;
}
fromsobj.innerHTML=null;
}
/** */
function mTop(sid){
selectRight=document.getElementById(sid);
var i = selectRight.options.selectedIndex;
if(i > 0){
Temp_Text=selectRight.options(i).text;
Temp_ID=selectRight.options(i).value;
for(j=i;j>0;j--){
selectRight.options(j).text=selectRight.options(j-1).text;
selectRight.options(j).value=selectRight.options(j-1).value;
}
selectRight.options(0).value=Temp_ID;
selectRight.options(0).text=Temp_Text;
selectRight.selectedIndex=0;
}
}
/** */
function mUp(sid){
selectRight=document.getElementById(sid);
var i = selectRight.options.selectedIndex;
var j = i-1
if(i>0){
Temp_Text = selectRight.options(j).text;
Temp_ID = selectRight.options(j).value;
selectRight.options(j).text = selectRight.options(i).text;
selectRight.options(j).value = selectRight.options(i).value;
selectRight.options(i).text = Temp_Text;
selectRight.options(i).value = Temp_ID;
selectRight.selectedIndex=j;
}
}
/** */
function mDown(sid){
selectRight=document.getElementById(sid);
var i = selectRight.options.selectedIndex;
if (i != selectRight.length-1){
var j = i+1;
if(i < selectRight.length){
Temp_Text = selectRight.options(j).text;
Temp_ID = selectRight.options(j).value;
selectRight.options(j).text = selectRight.options(i).text;
selectRight.options(j).value = selectRight.options(i).value;
selectRight.options(i).text = Temp_Text;
selectRight.options(i).value = Temp_ID;
selectRight.selectedIndex=j;
}
}
}
/** */
function mBottom(sid){
selectRight=document.getElementById(sid);
var i = selectRight.selectedIndex;
var j = selectRight.length-1
if(i < j){
Temp_Text = selectRight.options(i).text;
Temp_ID = selectRight.options(i).value;
for(var k=i+1;k<=j;k++){
selectRight.options(k-1).text=selectRight.options(k).text;
selectRight.options(k-1).value=selectRight.options(k).value;
}
selectRight.options(j).text=Temp_Text;
selectRight.options(j).value=Temp_ID;
selectRight.selectedIndex=j;
}
}
2. html 코드
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MOVE SELECT</title>
<script type="text/javascript" src="opationSelect.js"></script>
<style type="text/css">
<!--
.STYLE3 {
font-size: 14px;
font-weight: bold;
}
li{text-align:center}
input{text-align:center;width:80px}
-->
</style>
<script type="text/javascript">
function checkSub(){
var Vs=document.getElementById("rselect").options;
var str="you want move:
";
for(var i=0;i<Vs.length;i++){
Vs[i].selected=true;
str=str+"
"+Vs[i].text;
}
alert(str);
return false;
}
</script>
</head>
<body>
<form action="" method="post" id="form1">
<table width="100%" border="1" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td height="18" colspan="2" align="center"
style="padding-bottom: 20px">
<span class="STYLE3">MOVE SELECT</span>
</td>
</tr>
<tr>
<td height="35" >
<table border="1" cellpadding="0" align="center" cellspacing="0" >
<tr align="center">
<th>
left
</th>
<th>
MOVE
</th>
<th>
right
</th>
</tr>
<tr>
<td>
<select multiple="multiple"
style="height: 200px; width: 120px" id="lselect">
<option value="1">
opation1
</option>
<option value="2">
opation2
</option>
<option value="3">
opation3
</option>
<option value="4">
opation4
</option>
<option value="5">
opation5
</option>
<option value="6">
opation6
</option>
</select>
</td>
<td align="left">
<ul style="list-style:none;margin:0px; padding:0px;">
<li><input type="button" value="toTop" onclick="mTop('rselect');" /></li>
<li><input type="button" value="toUp" onclick="mUp('rselect');" /></li>
<li><input type="button" value="toLeftAll" onclick="giveOrUndoAll('lselect','rselect','left');" />
</li>
<li><input type="button" value="toLeft" onclick="moveoption('lselect','rselect','left');" />
</li>
<li><input type="button" value="toRight" onclick="moveoption('rselect','lselect','right');" /></li>
<li><input type="button" value="toRightAll" onclick="giveOrUndoAll('rselect','lselect','right');" /></li>
<li><input type="button" value="toDown" onclick="mDown('rselect');" /></li>
<li><input type="button" value="toButtom" onclick="mBottom('rselect');" /></li>
</ul>
</td>
<td>
<select multiple="multiple"
style="height: 200px; width: 120px" id="rselect">
</select>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="35" align="center">
<input value="submit" type="button" onclick="checkSub();" />
</td>
</tr>
</table>
</form>
</body>
</html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다른 사람의 웹사이트 편집: contenteditable 및 designMode그래도 우리가 그렇게 할 수 있다고 생각하는 것은 멋진 일입니다. 제가 강조하고 싶었던 일종의 관련 API가 실제로 몇 개 있기 때문에 오늘 그것을 가져왔습니다. contenteditable는 "true" 값이 할당...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.