基于javascript实现单选及多选的向右和向左移动实例
本文实例讲述了基于javascript实现单选及多选的向右和向左移动实例。分享给大家供大家参考。具体实现方法如下：
方法一：
<body>
<h1>实现单选及多选的向右和向左移动</h1>
<divid="lst">
<span>
<selectid="lselect"size="10"multiple="multiple"style="width:100px;background-color:blue;">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
<option>选项6</option>
<option>选项7</option>
<option>选项8</option>
<option>选项9</option>
<option>选项10</option>
</select>
<spanstyle="width:200px;height:100px;">
<inputtype="button"value="单个向右移动"onclick="oneRMove()"/>
<inputtype="button"value="多个向右移动"onclick="moveRMove()"/>
<inputtype="button"value="单个向左移动"onclick="oneLMove()"/>
<inputtype="button"value="多个向左移动"onclick="moveLMove()"/>
</span>
<span>
<selectid="rselect"size="10"style="width:100px;background-color:yellow;"multiple="multiple">
</select>
</span>
</span>
</div>
</body>
<scripttype="text/javascript">
window.onload=function(){}
//获取select对象
varlselect=document.getElementById("lselect");
varrselect=document.getElementById("rselect");
//获取lselect和roptions对象中的所有option
varloptions=lselect.options;
varroptions=rselect.options;
functiononeRMove(){
for(vari=0;i<loptions.length;i++){
varop=loptions[i];
if(op.selected){
rselect.appendChild(op);
break;
}
}
}
functionmoveRMove(){
for(vari=0;i<loptions.length;i++){
varop=loptions[i];
if(op.selected){
rselect.appendChild(op);
i--;
}
}
}
functiononeLMove(){
for(vari=0;i<roptions.length;i++){
varop=roptions[i];
if(op.selected){
lselect.appendChild(op);
break;
}
}
}
functionmoveLMove(){
for(vari=0;i<roptions.length;i++){
varop=roptions[i];
if(op.selected){
lselect.appendChild(op);
i--;
}
}
}
</script>
方法二：
<scripttype="text/javascript">
sortitems=1;
functionmove(fbox,tbox){
for(vari=0;i<fbox.options.length;i++){
if(fbox.options[i].selected&&fbox.options[i].value!=""){
varno=newOption();
no.value=fbox.options[i].value;
no.text=fbox.options[i].text;
tbox.options[tbox.options.length]=no;
fbox.options[i].value="";
fbox.options[i].text="";
}
}
BumpUp(fbox);
if(sortitems)SortD(tbox);
}
functionBumpUp(box){
for(vari=0;i<box.options.length;i++){
if(box.options[i].value==""){
for(varj=i;j<box.options.length-1;j++){
box.options[j].value=box.options[j+1].value;
box.options[j].text=box.options[j+1].text;
}
varln=i;break;
}
}
if(ln<box.options.length){
box.options.length-=1;
BumpUp(box);
}
}
functionSortD(box){
vartemp_opts=newArray();
vartemp=newObject();
for(vari=0;i<box.options.length;i++){
temp_opts[i]=box.options[i];
}
for(varx=0;x<temp_opts.length-1;x++){
for(vary=(x+1);y<temp_opts.length;y++){
if(temp_opts[x].text>temp_opts[y].text){
temp=temp_opts[x].text;
temp_opts[x].text=temp_opts[y].text;
temp_opts[y].text=temp;
temp=temp_opts[x].value;
temp_opts[x].value=temp_opts[y].value;
temp_opts[y].value=temp;
}
}
}
for(vari=0;i<box.options.length;i++){
box.options[i].value=temp_opts[i].value;
box.options[i].text=temp_opts[i].text;
}
}
</script>
</head>
<body>
<formACTION=""METHOD="POST">
<tableborder="0">
<tr>
<td><selectmultiplesize="5"name="list1">
<optionvalue="l1">A</option>
<optionvalue="l2">B</option>
<optionvalue="l3">C</option>
<optionvalue="l4">D</option>
</select></td>
<td>
<inputtype="button"value="向右"onclick="move(this.form.list1,this.form.list2)"name="B1"><br>
<inputtype="button"value="向左"onclick="move(this.form.list2,this.form.list1)"name="B2">
</td>
<td><selectmultiplesize="5"name="list2">
<optionvalue="r1">E</option>
<optionvalue="r2">F</option>
<optionvalue="r3">G</option>
<optionvalue="r4">H</option>
</select></td>
</tr>
</table>
</form>
</body>
希望本文所述对大家的javascript程序设计有所帮助。