JavaScript Select和Option列表元素上下左右移动

代码：

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

<input type="button" value=" Down " id="btnDowm" onClick="move(false);" style="width:65" />
</td>
<td>
<select multiple id="leftSel" οnclick="setButton(this)" style="height:200px;width:100px;">
<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" />

效果图

转载于:https://www.cnblogs.com/diviner926934/p/6957907.html

JavaScript Select和Option列表元素上下左右移动相关推荐

javascript select option对象总结
javascript select option对象总结一基础理解: var e = document.getElementById("selectId"); e. option ...
怎样得到select所有option里的值
问: 一个页面里有个复选select 因为option是动态变化的我想在提交后得到这个select里所有option的value <select multiple name=test> ...
html 中的下拉列表,【HTML】什么是 HTML 中的下拉列表（select、option）
我们以英雄联盟大区服务器状态查询网站里的"下拉选择服务器状态"为例,先来看一下,什么是下拉列表,浏览器运行效果如下所示这就是下拉列表用到的地方之一,接下来我们就来学习一下HTML中 ...
Javascript - Select操作大集合
1.向Select里添加Option function fnAddItem(text,value) { var selTarget = document.get ...
js 操作select和option
2019独角兽企业重金招聘Python工程师标准>>> 1.动态创建selectfunction createSelect(){var mySelect = document.cre ...
CSS-5 列表元素(ol+ul++li+dl+dt+dd)、表格元素、单元格合并、表单元素(input+label+radio+...)、Emmet语法、结构伪类(:nth-child）
目录 1_列表元素 1.1_列表的实现方式 1.2_有序列表 – ol – li 1.3_无序列表 – ul - li 1.4_定义列表 – dl – dt - dd 1.5_ 写前端代码逻辑顺序 2 ...
html中select标记表示,如何在HTML中实现Select和Option标记
选择和操作是HTML中最重要的标记之一,不能创建下拉菜单而不使用它.让我们以下面的方式开始我们在HTML中选择和选项标记的旅程:什么是HTML中的选择和选项标记?HTML中的Se 选择和操作是HTML ...
如何在JavaScript中实现链接列表
If you are learning data structures, a linked list is one data structure you should know. If you do ...
轻量函数式 JavaScript：八、列表操作
你在前一章闭包/对象的兔子洞中玩儿的开心吗?欢迎回来! 如果你能做很赞的事情,那就反复做. 我们在本书先前的部分已经看到了对一些工具的简要引用,现在我们要非常仔细地看看它们,它们是 map(..).f ...

JavaScript Select和Option列表元素上下左右移动

JavaScript Select和Option列表元素上下左右移动相关推荐

最新文章

热门文章