基于javascript實現單選及多選的向右和向左移動實例

2024-05-06 16:23:42

字體：大中小

來源：轉載

供稿：網友

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

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

方法一：

<body>

<h1>實現單選及多選的向右和向左移動</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>