基于javascript實現(xiàn)單選及多選的向右和向左移動實例

更新時間：2015年07月25日 16:37:52 作者：whylyq

這篇文章主要介紹了基于javascript實現(xiàn)單選及多選的向右和向左移動,涉及javascript針對頁面元素的動態(tài)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了基于javascript實現(xiàn)單選及多選的向右和向左移動實例。分享給大家供大家參考。具體實現(xiàn)方法如下：

方法一：

<body>
<h1>實現(xiàn)單選及多選的向右和向左移動</h1>
<div id="lst">
  <span>
  <select id="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>
  <span style="width: 200px;height: 100px;">
  <input type="button" value="單個向右移動" onclick="oneRMove()" />
  <input type="button" value="多個向右移動" onclick="moveRMove()" />
  <input type="button" value="單個向左移動" onclick="oneLMove()" />
  <input type="button" value="多個向左移動" onclick="moveLMove()" />
  </span>
  <span>
  <select id="rselect" size="10" style="width: 100px;background-color: yellow;" multiple="multiple">
  </select>
  </span>
  </span>
</div> 
</body>
<script type="text/javascript">
window.onload = function(){}
//獲取select對象
var lselect=document.getElementById("lselect");
var rselect=document.getElementById("rselect");
//獲取lselect和roptions對象中的所有option
var loptions=lselect.options;
var roptions=rselect.options;
function oneRMove(){
for(var i=0;i<loptions.length;i++){
var op=loptions[i];
if(op.selected){
rselect.appendChild(op);
break;
}
}
}
function moveRMove(){
for(var i=0;i<loptions.length;i++){
var op=loptions[i];
if(op.selected){
rselect.appendChild(op);
i--;
}
}
}
function oneLMove(){
for(var i=0;i<roptions.length;i++){
var op=roptions[i];
if(op.selected){
lselect.appendChild(op);
break;
}
}
}
function moveLMove(){
for(var i=0;i<roptions.length;i++){
var op=roptions[i];
if(op.selected){
lselect.appendChild(op);
i--;
}
}
}
</script>

方法二：

<script type="text/javascript">
sortitems = 1;
function move(fbox,tbox) {
for(var i=0; i<fbox.options.length; i++) {
if(fbox.options[i].selected && fbox.options[i].value != "") {
var no = new Option();
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);
}
function BumpUp(box) {
for(var i=0; i<box.options.length; i++) {
if(box.options[i].value == "") {
for(var j=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;
}
var ln = i;break;
  }
}
if(ln < box.options.length) {
box.options.length -= 1;
BumpUp(box);
  }
}
function SortD(box) {
var temp_opts = new Array();         
var temp = new Object();           
for(var i=0; i<box.options.length; i++) { 
temp_opts[i] = box.options[i];
}
for(var x=0; x<temp_opts.length-1; x++) {
for(var y=(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(var i=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>
<form ACTION="" METHOD="POST">
<table border="0">
<tr>
<td><select multiple size="5" name="list1">
<option value="l1">A</option>
<option value="l2">B </option>
<option value="l3">C</option>
<option value="l4">D</option>
</select></td>
<td>
<input type="button" value="向右" onclick="move(this.form.list1,this.form.list2)" name="B1"><br>
<input type="button" value="向左" onclick="move(this.form.list2,this.form.list1)" name="B2">
</td>
<td><select multiple size="5" name="list2">
<option value="r1">E</option>
<option value="r2">F </option>
<option value="r3">G</option>
<option value="r4">H</option>
</select></td>
</tr>
</table>
</form>
</body>

希望本文所述對大家的javascript程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

JS中使用 after 偽類清除浮動實例
這篇文章主要介紹了使用 after 偽類清除浮動實例，非常不錯，具有參考借鑒價值，需要的的朋友參考下
2017-03-03
JavaScript?中URL?查詢字符串(query?string)的序列與反序列化的方法
在 JavaScript 中，可以使用?URLSearchParams?對象來處理 URL 中的查詢字符串，這篇文章主要介紹了JavaScript?中URL查詢字符串(query?string)的序列與反序列化,需要的朋友可以參考下
2023-01-01
js+canvas實現(xiàn)畫板功能
這篇文章主要為大家詳細介紹了js+canvas實現(xiàn)畫板功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09
javascript prototype原型操作筆記
在 JavaScript 中，prototype 不但能讓對象共享自己財富，而且 prototype 還有尋根問祖的天性，從而使得先輩們的遺產(chǎn)可以代代相傳。
2009-12-12
這篇文章主要為大家詳細介紹了JavaScript仿京東搜索框?qū)嵗?，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03