Home > Article > Web Front-end > Examples of moving right and left for single selection and multiple selection based on javascript_javascript skills

Examples of moving right and left for single selection and multiple selection based on javascript_javascript skills

WBOYOriginal: 2016-05-16 15:49:061032browse

This article describes an example of moving right and left for single selection and multi-selection based on JavaScript. Share it with everyone for your reference. The specific implementation method is as follows:

Method 1:

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

Method 2:

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

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Solution to mouseout and mouseover events triggered when the mouse passes over a child element_javascript skillsNext article：Solution to mouseout and mouseover events triggered when the mouse passes over a child element_javascript skills

See more

Examples of moving right and left for single selection and multiple selection based on javascript_javascript skills

Related articles