用JavsScript能做出带下拉单的多重选择框,并把选择项移至另一个列表框吗

QQgenie 2003-10-30 08:56:46
就是这样子:

╭════════╮ ╭════════╮
║ＸＸＸ部门1 ║ ║姓名１ ║
║ 姓名１ ║ >> ║姓名 2 ║
║ 姓名 2 ║ ║姓名 6 ║
║ 姓名 3 ║ ║ ║
║ＸＸＸ部门2 ║ << ║ ║
║ 姓名 4 ║ ║ ║
║ 姓名 5 ║ ║ ║
║ＸＸＸ部门3 ║ ║ ║
║ 姓名 6 ║ ║ ║
╰════════╯ ╰════════╯
如能用双击选择更好,能拖动就更好了,再不然就用">>"和"<<"了.


...全文
57 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
JK_10000 2004-03-03
  • 打赏
  • 举报
 回复
选择Option左右移动，以及手工排序(20030408):
http://jkisjk.vip.sina.com/html/moveRightOrLeft.htm

gjd111686 2004-03-03
  • 打赏
  • 举报
 回复
<body>
<script language="JavaScript">
<!--
/*move(s1,s2,flag):s1是源列表框，s2是目的列表框，flag是是否全部移动*/
function move(s1,s2,flag){
var tem=new Array();
var sa=document.frm.elements[s1];
var sb=document.frm.elements[s2];
var s=sa.selectedIndex>-1?1:0
with(sa)
for(i=length-1;i>=0;i--)
if(options[i].selected||flag){tem[tem.length]=options[i];options[i]=null}
if(s||flag){
for(i=0;i<sb.length;i++)tem[tem.length]=sb.options[i]
with(sb){
length=0;
tem.sort(sortArr)
for(i=0;i<tem.length;i++)options[length]=new Option(tem[i].text,tem[i].value)
}
}
}

/*move_self(s,flag):s是列表框name,flag(1,-1)，是上移或下移*/
function move_self(s,flag){
var sa=document.frm.elements[s]
var tem;
with(sa){
if(flag==1){
if(selectedIndex>0)
for(i=0;i<length;i++)
if(options[i].selected){
tem_text=options[i].text;tem_value=options[i].value
options[i].text=options[i-1].text;
options[i].value=options[i-1].value;
options[i-1].text=tem_text;options[i-1].value=tem_value
options[i-1].selected=true;options[i].selected=false
}
}
else
for(i=length-1;i>=0;i--)
if(options[i].selected){
if(i==length-1)break;
tem_text=options[i].text;tem_value=options[i].value
options[i].text=options[i+1].text;
options[i].value=options[i+1].value;
options[i+1].text=tem_text;options[i+1].value=tem_value
options[i+1].selected=true;options[i].selected=false
}
}
}

/*显示列表框选中的值,s是列表框的name*/
function show(s){
var str=""
with(document.frm.elements[s])
for(i=0;i<length;i++)
if(options[i].selected)str+="\n第"+(i+1)+"个option:\ntext:"+options[i].text+" value:"+options[i].value
alert(str)
}

function sortArr(a,b){
if(a.text>b.text)return 1
if(a.text<b.text)return -1
return 0
}
//-->
</script>
<form name="frm">
<select name="a" size="5" style="width:100" multiple>
<option value="a1">1</option>
<option value="a2">2</option>
<option value="a3">3</option>
<option value="a4">4</option>
</select>
<input type=button value=">>" onclick="move('a','b',1)">
<input type=button value=" > " onclick="move('a','b')">
<input type=button value=" < " onclick="move('b','a')">
<input type=button value="<<" onclick="move('b','a',1)">
<select name="b" size="5" style="width:100" multiple>
<option value="b1">a</option>
<option value="b2">b</option>
<option value="b3">c</option>
<option value="b4">d</option>
<option value="b5">e</option>
</select><br/>
<input type=button value="up" onclick="move_self('a',1)">
<input type=button value="down" onclick="move_self('a',-1)">
<input type=button value="up" onclick="move_self('b',1)">
<input type=button value="down" onclick="move_self('b',-1)">
<input type=button value="get a's value" onclick="show('a')">
<input type=button value="get b's value" onclick="show('b')">
</form>
</body>
lxzhi 2004-03-03
  • 打赏
  • 举报
 回复
我也试过,确实不好做哦,我也想做
QQgenie 2003-10-30
  • 打赏
  • 举报
 回复
左列表还要支持下拉菜单的,不好做哦
zhfkiller 2003-10-30
  • 打赏
  • 举报
 回复
当然可以做了
将左边的select的value放到右边
产业园区运营负责人如何利用区域产业知识图谱提升招商精准度？.docx
科易网基于40亿+科创知识图谱数据库，深度探索AI技术在技术转移、成果转化、技术经纪、知识产权、产业创新、科技招商等垂直领域的多样化应用场景，研究科技创新领域的AI+数智化解决方案，推动科技创新与产业创新智能化发展。
编程题答案-全国计算机等级考试二级教程-Python语言程序设计(2018年版)
下载代码方式：https://pan.quark.cn/s/a4b39357ea24 全国计算机等级考试二级教程《Python语言程序设计》（2018年版）被视为针对Python入门者和备考人员的核心学习材料。该资料汇总了教材内的所有编程练习答案，这些答案在Python 3.5.3环境中经过实际执行测试，从而保障了代码的准确性和应用价值。备考人员借助这些答案，能够评估自身的学习进度，并深入理解和熟练掌握Python编程的基础原理与方法。 1. Python基础理论：Python作为一门高级编程语言，因其简明扼要的语法结构和卓越的功能表现而备受推崇。基础内容涵盖了变量、数据种类（例如整型、浮点型、字符串、布尔型、列表、元组、字典、集合）、逻辑控制（比如条件判断if-else，循环控制for、while）、函数的声明及使用、模块的引入等。 2. Python高级应用：Python的进阶内容涉及异常管理（try-except-finally结构），类与实例（面向对象编程的基础，包含类的构造、对象的生成、属性与方法的运用、继承机制、多态表现），装饰器（用于调整函数或类的功能特性），上下文管理器（借助with语句实现资源管理）等。 3. 数据文件处理：Python配备了全面的文件操作功能，涉及文件的开启、数据读写、关闭操作，以及多种操作模式（例如r模式用于读取，w模式用于写入，a模式用于追加内容等）。此外，还包括文本文件与二进制文件的转换处理，以及文件的位置调整、复制和删除等操作。 4. 标准库的运用：Python的标准库资源极为丰富，比如os模块提供操作系统接口，sys模块用于获取系统参数，random模块可用于生成随机数值，datetime模块负责处...
MAC卸载Xcode方法
代码转载自：https://pan.quark.cn/s/1fad123edf03 在MAC操作系统环境中移除x-code的程序指令文档内列出了四个具体的指令
Python RetinaNet V2目标检测 ResNet50-FPN
Python RetinaNet V2目标检测 ResNet50-FPN RetinaNet ResNet50-FPN V2 对图片做 COCO 预训练检测，输出标注图与置信度条形图，可换本地 jpg/png。 功能： · RetinaNet V2 · ResNet50-FPN · COCO 预训练检测 · 检测框与得分条形图 · 可换本地图片 · 打包预跑出 output/preview 压缩包含可运行源码、依赖与说明，按 README 安装后即可复现。
TCP调试工具-下载即用.zip
代码下载地址： https://pan.quark.cn/s/664854f01855 TCP/IP SOCKET协议构成了互联网通信的基石，它明确了网络设备之间数据交换的规范。TCP（Transmission Control Protocol）是一种以连接为导向、具备可靠性且基于字节流的传输层通信规范，而UDP（User Datagram Protocol）则是一种非连接型且不可靠的传输协议。在实施TCP/IP SOCKET的调试工作中，专业的软件能够协助开发者更清晰地洞察网络通信的流程，精准地找出故障点，并对代码进行改进。 "TCP模拟调试工具"即为一种实用的辅助性软件，它赋予用户模拟TCP连接、发送及接收数据的能力，从而对网络应用程序进行测试和调试。此工具或许具备以下几项功能： 1. **连接模拟**：可以模拟客户端与服务器之间TCP连接的完整过程，涵盖三次握手和四次挥手阶段，从而帮助理解TCP连接的完整生命周期。 2. **数据发送与接收**：支持自定义数据包的发送，并能显示接收到的数据，这对于核实数据传输的准确性极为关键。 3. **错误检测与重传**：TCP协议内含错误检测和丢失数据自动重传的机制，该工具或许能够模拟这些场景，助力开发者测试其应用的容错性能。 4. **流量控制与拥塞控制**：TCP通过滑动窗口机制实现流量控制与拥塞管理，工具或许提供查看和调整这些参数的选项。 5. **端口监听**：能够监听指定的端口，观察数据的进出情况，这对于服务器端程序的调试尤为有益。 6. **日志记录**：记录所有通信事件，便于后续的分析与问题定位。 7. **多线程支持**：针对处理多个并发连接的程序，工具或许提供多线程或并发会话的模拟。 8. **协议解...
JavaScript

87,987

社区成员

224,683

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章