【JavaScript】列表元素上下左右移动：Select和Option的应用
2009-01-04 11:18
711 查看
功能如下：
支持一次选中多项在左右列表中来回移动
var currentSel = null;
function move(){
if(arguments.length==1){
moveUp(arguments[0]);
}else if(arguments.length==2){
moveRight(arguments[0],arguments[1]);
}
}
function moveUp(direction){
if(currentSel == null) return;
var index = currentSel.selectedIndex;
if(direction){//up
if(index==0) return;
var value = currentSel.options[index-1].value;
var text = currentSel.options[index-1].text;
currentSel.options[index-1].value = currentSel.options[index].value;
currentSel.options[index-1].text = currentSel.options[index].text;
currentSel.options[index].value = value;
currentSel.options[index].text = text;
currentSel.options[index].selected = false;
currentSel.options[index-1].selected = true;
}else{//down
if(index==(currentSel.length-1)) return;
var value = currentSel.options[index+1].value;
var text = currentSel.options[index+1].text;
currentSel.options[index+1].value = currentSel.options[index].value;
currentSel.options[index+1].text = currentSel.options[index].text;
currentSel.options[index].value = value;
currentSel.options[index].text = text;
currentSel.options[index].selected = false;
currentSel.options[index+1].selected = true;
}
}
function moveRight(src,des){
if(src.selectedIndex==-1){
alert("Please select first!");
return;
}
for(var i=0;i
代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="majianan">
<script language="javascript" >
var currentSel = null;
function move(){
if(arguments.length==1){
moveUp(arguments[0]);
}else if(arguments.length==2){
moveRight(arguments[0],arguments[1]);
}
}
function moveUp(direction){
if(currentSel == null) return;
var index = currentSel.selectedIndex;
if(direction){//up
if(index==0) return;
var value = currentSel.options[index-1].value;
var text = currentSel.options[index-1].text;
currentSel.options[index-1].value = currentSel.options[index].value;
currentSel.options[index-1].text = currentSel.options[index].text;
currentSel.options[index].value = value;
currentSel.options[index].text = text;
currentSel.options[index].selected = false;
currentSel.options[index-1].selected = true;
}else{//down
if(index==(currentSel.length-1)) return;
var value = currentSel.options[index+1].value;
var text = currentSel.options[index+1].text;
currentSel.options[index+1].value = currentSel.options[index].value;
currentSel.options[index+1].text = currentSel.options[index].text;
currentSel.options[index].value = value;
currentSel.options[index].text = text;
currentSel.options[index].selected = false;
currentSel.options[index+1].selected = true;
}
}
function moveRight(src,des){
if(src.selectedIndex==-1){
alert("Please select first!");
return;
}
for(var i=0;i<src.length;i++){
if(src[i].selected){
var op = document.createElement("option");
op.value = src.options[src.selectedIndex].value;
op.text = src.options[src.selectedIndex].text;
des.options.add(op);
src.remove(i);
i--;
}
}
}
function setButton(obj){
if(obj.length==0) return;
currentSel = obj;
if(obj.id=="leftSel"){
document.getElementById("btnLeft").disabled = true;
document.getElementById("btnRight").disabled = false;
reSelect(document.getElementById("rightSel"));
}else{
document.getElementById("btnLeft").disabled = false;
document.getElementById("btnRight").disabled = true;
reSelect(document.getElementById("leftSel"));
}
}
function reSelect(obj){
for(var i=0; i<obj.length; i++){
if(obj[i].selected) obj[i].selected = false;
}
}
</script>
</HEAD>
<BODY>
<form id="form1">
<table width="40%" align="center">
<tr>
<td>
<input type="button" value=" Up " id="btnUp" onClick="move(true);" style="width:65"/>
<br />
<input type="button" value=" Down " id="btnDowm" onClick="move(false);" style="width:65" />
</td>
<td>
<select multiple id="leftSel" onclick="setButton(this)" ondblclick="document.getElementById('btnRight').click()" style="height:200px;width:100px;">
<optgroup label="Left List" />
<option value="1">Java</option>
<option value="2">JavaScript</option>
<option value="3">C++</option>
<option value="4">HTML</option>
</select>
</td>
<td>
<input type="button" value=" >> " id="btnRight" onClick="move(document.getElementById('leftSel'),document.getElementById('rightSel'));" style="width:65" />
<br />
<input type="button" value=" << " id="btnLeft" onClick="move(document.getElementById('rightSel'),document.getElementById('leftSel'));" style="width:65" />
</td>
<td>
<select multiple id="rightSel" onclick="setButton(this)" ondblclick="document.getElementById('btnLeft').click()" style="height:200px;width:100px;" >
<optgroup label="Right List" />
<option value="5">CSS</option>
<option value="6">.Net</option>
</select>
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
支持一次选中多项在左右列表中来回移动
var currentSel = null;
function move(){
if(arguments.length==1){
moveUp(arguments[0]);
}else if(arguments.length==2){
moveRight(arguments[0],arguments[1]);
}
}
function moveUp(direction){
if(currentSel == null) return;
var index = currentSel.selectedIndex;
if(direction){//up
if(index==0) return;
var value = currentSel.options[index-1].value;
var text = currentSel.options[index-1].text;
currentSel.options[index-1].value = currentSel.options[index].value;
currentSel.options[index-1].text = currentSel.options[index].text;
currentSel.options[index].value = value;
currentSel.options[index].text = text;
currentSel.options[index].selected = false;
currentSel.options[index-1].selected = true;
}else{//down
if(index==(currentSel.length-1)) return;
var value = currentSel.options[index+1].value;
var text = currentSel.options[index+1].text;
currentSel.options[index+1].value = currentSel.options[index].value;
currentSel.options[index+1].text = currentSel.options[index].text;
currentSel.options[index].value = value;
currentSel.options[index].text = text;
currentSel.options[index].selected = false;
currentSel.options[index+1].selected = true;
}
}
function moveRight(src,des){
if(src.selectedIndex==-1){
alert("Please select first!");
return;
}
for(var i=0;i
| CSS .Net C++ JavaScript Java HTML | > "> |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="majianan">
<script language="javascript" >
var currentSel = null;
function move(){
if(arguments.length==1){
moveUp(arguments[0]);
}else if(arguments.length==2){
moveRight(arguments[0],arguments[1]);
}
}
function moveUp(direction){
if(currentSel == null) return;
var index = currentSel.selectedIndex;
if(direction){//up
if(index==0) return;
var value = currentSel.options[index-1].value;
var text = currentSel.options[index-1].text;
currentSel.options[index-1].value = currentSel.options[index].value;
currentSel.options[index-1].text = currentSel.options[index].text;
currentSel.options[index].value = value;
currentSel.options[index].text = text;
currentSel.options[index].selected = false;
currentSel.options[index-1].selected = true;
}else{//down
if(index==(currentSel.length-1)) return;
var value = currentSel.options[index+1].value;
var text = currentSel.options[index+1].text;
currentSel.options[index+1].value = currentSel.options[index].value;
currentSel.options[index+1].text = currentSel.options[index].text;
currentSel.options[index].value = value;
currentSel.options[index].text = text;
currentSel.options[index].selected = false;
currentSel.options[index+1].selected = true;
}
}
function moveRight(src,des){
if(src.selectedIndex==-1){
alert("Please select first!");
return;
}
for(var i=0;i<src.length;i++){
if(src[i].selected){
var op = document.createElement("option");
op.value = src.options[src.selectedIndex].value;
op.text = src.options[src.selectedIndex].text;
des.options.add(op);
src.remove(i);
i--;
}
}
}
function setButton(obj){
if(obj.length==0) return;
currentSel = obj;
if(obj.id=="leftSel"){
document.getElementById("btnLeft").disabled = true;
document.getElementById("btnRight").disabled = false;
reSelect(document.getElementById("rightSel"));
}else{
document.getElementById("btnLeft").disabled = false;
document.getElementById("btnRight").disabled = true;
reSelect(document.getElementById("leftSel"));
}
}
function reSelect(obj){
for(var i=0; i<obj.length; i++){
if(obj[i].selected) obj[i].selected = false;
}
}
</script>
</HEAD>
<BODY>
<form id="form1">
<table width="40%" align="center">
<tr>
<td>
<input type="button" value=" Up " id="btnUp" onClick="move(true);" style="width:65"/>
<br />
<input type="button" value=" Down " id="btnDowm" onClick="move(false);" style="width:65" />
</td>
<td>
<select multiple id="leftSel" onclick="setButton(this)" ondblclick="document.getElementById('btnRight').click()" style="height:200px;width:100px;">
<optgroup label="Left List" />
<option value="1">Java</option>
<option value="2">JavaScript</option>
<option value="3">C++</option>
<option value="4">HTML</option>
</select>
</td>
<td>
<input type="button" value=" >> " id="btnRight" onClick="move(document.getElementById('leftSel'),document.getElementById('rightSel'));" style="width:65" />
<br />
<input type="button" value=" << " id="btnLeft" onClick="move(document.getElementById('rightSel'),document.getElementById('leftSel'));" style="width:65" />
</td>
<td>
<select multiple id="rightSel" onclick="setButton(this)" ondblclick="document.getElementById('btnLeft').click()" style="height:200px;width:100px;" >
<optgroup label="Right List" />
<option value="5">CSS</option>
<option value="6">.Net</option>
</select>
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【JavaScript】列表元素上下左右移动：Select和Option的应用
- JavaScript Select和Option列表元素上下左右移动
- JavaScript Select和Option列表元素上下左右移动
- 【JavaScript】列表（Select）选项（Option）的移动（上下左右）
- 【JavaScript】列表（Select）选项（Option）的移动（上下左右）
- 【JavaScript】列表（Select）选项（Option）的移动（上下左右）
- 【JavaScript】下拉列表select中在value传递多个值，取出其option显示值，并应用此作为导航
- javascript实现select中option的顺序上下移动
- jquery的综合应用2（select里option元素的移动）
- Javascript实现数组中的元素上下移动
- JS实现Select的option上下移动的方法
- JavaScript对Select的子元素Option的操作
- css 不影响同辈元素上下左右移动元素位置
- Javascript 利用键盘上的上下左右（回车）键模拟出tab 键的功能上下左右移动焦点
- javascript 列表 多选 左右移动
- JavaScript 对两个select 元素进行操作,移动其中的选项
- JavaScript 左右上下自动晃动，自动移动。
- 用自定义按钮控制multiple型select元素的上下移动
- jQuery插件DIY：设置左右select的option的互相移动