左右框选择

最新推荐文章于 2022-08-12 19:04:26 发布
最新推荐文章于 2022-08-12 19:04:26 发布
阅读量371 收藏
点赞数
分类专栏： JavaScript 文章标签： button function generator javascript html list
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liu_zhongjie/article/details/3953563
版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
sortitems = 1; // Automatically sort items within lists? (1 or 0)

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 moveall(fbox,tbox) {
for(var i=0; i<fbox.options.length; i++) {
    if(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;
     }
}

 

  
// End -->
</script>

<form ACTION="" METHOD="POST">
<table border="0">
<tr>
<td><select multiple size="7" name="list1" style="width:250px">
<option value="11"> item 1.1 </option>
<option value="12"> item 1.2 </option>
<option value="13"> item 1.3 </option>
</select></td>
<td>
<input type="button" value="    >>   " οnclick="moveall(this.form.list1,this.form.list2)" name="B3">
<br/>
<input type="button" value="    ->   " οnclick="move(this.form.list1,this.form.list2)" name="B1">
<br/>
<input type="button" value="    <-   " οnclick="move(this.form.list2,this.form.list1)" name="B2">
<br/>

<input type="button" value="    <<   " οnclick="moveall(this.form.list2,this.form.list1)" name="B4">
</td>
<td><select multiple size="7" name="list2" style="width:250px">
<option value="21"> item 2.1 </option>
<option value="22"> item 2.2 </option>
<option value="23"> item 2.3 </option>
</select></td>


</tr>
</table>
</form>
</BODY>
</HTML>

liu_zhongjie
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js左右选择
w2019424的博客
07-20 331
代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border="1px" width="400px"> <tr> &l...
js实现左右双向选择器
10-10
js非常简单的实现了左右双向选择器，非常简单，拿过去就能用，希望能帮助到你
js实现的左右选择框
newpeter
02-04 192
&lt;SCRIPT LANGUAGE="JavaScript"&gt;&lt;!-- Beginsortitems = 1; // Automatically sort items within lists? (1 or 0)function move(fbox,tbox) {for(var i=0; i&lt;fbox.options.length; i++) {&nbsp;&nbsp;&nb...
js实现左右选择框
sjl6666666666的博客
11-24 2901
<script type="text/javascript"> //选择 function a(){ //var option1=document.getElementsByName("option1"); var selected1=document.getElementById("selected1"); var option1=selected1.getElementsB
制作左右选择框
weixin_44546758的博客
06-27 1462
开发工具与关键技术：VS、JQuery 作者：LJR 撰写时间：2019年 6 月 26 日 在做项目的时候，我们可能会经常遇到一些技术点是我们没有遇到过的，所以这个时候程序员会上网查各种各样的资料，那么今天我们来做一个左右选择框的制作。左右选择框的样式如下图： 图中的左右选择框，框里面的数据可以左右移动的，数据可以选着单条移动，也可以双击数据然后数据会左右框切换，还可以点击“>&gt...
左右选择框
05-06
左右选择框
Javascript左右选择框
04-11
适用于入门前端 学习的小白参考学习，是经典的demo,适用于左侧选择框选择，选中的放到右侧
jquery 左右选择框
03-25
jquery 左右选择框
jQuery双列表左右选择框代码
06-24
jQuery双列表左右选择框代码是一款点击选中列表中间按钮操作左右移动效果代码。
js实现左右2个下拉选择框，左右上下移动功能
05-27
NULL 博文链接：https://hylong05.iteye.com/blog/606784
JS左右框
dizunai4988的博客
06-10 147
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> select { width: 70px; height: 120px; } button { dis...
JS实现左右选中移动
Those who achieve great thing do not stick to trifles
01-26 1504
JS实现左右选中移动 一、步骤分析 1、使用标签进行页面设置 2、增加移动按钮 3、通过获取Id方法获取指定标签内容 4、使用document.getElementById("right").appendChild(xxx); 增加一个子标签 二、代码练习 <!DOCTYPE html> <html> <head> <meta charset...
js实现的左右选择框（转）
快乐向日葵
05-02 137
item 1.1 item 1.2 item 1.3 item 2.1 item 2.2 item 2.3
Javascript知识【案例：重写省市联动&案例：列表左右选择】
若有所执，必有所成，心之所向，必显光芒
08-12 268
案例：重写省市联动&案例：列表左右选择
js左右切换 选择年龄
I need you back to stay
03-17 1293
无标题文档 .text{ size:10; border:1px solid 0px; height:30px; width:30px; font-size:24px; text-align:center} .tables{ height:50px; width:350px; font-size:24px; text-align:center; } .t
JS左右选框(一)
昨日凡阳
03-21 203
一、采用纯js实现 这个是左右选框公共画面,SelectBox.jsp &lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;script type="text/javascript" language="JavaScript"&g
左右框互相 移动文件
zhangfulilili的博客
01-17 292
script type="text/javascript">        $(function(){ //选择id是add的span控件，执行单机事件            $("#add").click(function(){ //id为select1的列表所有被选中的option移动到id为select2的列表中               $("#select1 option:
下拉列表左右选择(js代码)
jeffhymm的博客
10-26 337
html> html lang="en"> head> meta charset="UTF-8"> title>title> script type="text/javascript"> function allToRight(){ //得到左边的select 对象 var selectLeft=document.getElementByI
用两百字左右介绍下Koa框架
最新发布
04-17
Koa框架是一个基于Node.js平台的轻量级Web应用框架，它的设计理念是利用es6的generator和async/await语法来让代码更加简洁明了。Koa框架没有捆绑任何中间件，它的核心代码只有几十行，通过中间件机制实现具体的功能。通过使用Koa，我们可以轻松构建一个高效、可靠而且易于维护的Web应用程序。 Koa框架具有以下特点： 1. 模块化：Koa框架采用了类似洋葱模型的中间件机制，每个中间件只需要关注自身的逻辑处理，而不需要关心前后的业务流程。这种模块化的设计让代码更具可维护性和可扩展性。 2. 简洁：Koa框架的核心只有几十行代码，同时采用es6的generator和async/await语法，使得代码更加简洁、易读。 3. 高效：Koa框架采用基于Node.js的异步I/O模型，使得每个请求都可以在一个单独的线程中被处理。这种设计使得Koa应用程序可以处理更高的并发量而不会导致性能下降。 4. 可定制：由于Koa框架没有捆绑任何中间件，用户可以根据自身的需求，自由选择并集成适合自己的中间件，从而达到更好的效果。 总之，Koa框架的诞生，给了Node.js开发者一个更加灵活、简洁和高性能的选择，让我们更加容易地构建出高效可靠的Web应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值