javascript实现组合列表框中元素移动效果
应用背景:在页面中有两个列表框,需要把其中一个列表框的元素移动到另一个列表框 。
(1)编写init方法对两个列表框进行初始化;
(2)为body添加onload事件调用init方法;
(3)编写move(s1,s2)把s1中选中的选项移到s2;
(4)编写moveAll(s1,s2)把s1中所有的选项都移到s2.
(5)为按钮添加onclick事件。
javascript代码如下:
<script type="text/javascript" language="javascript">
//对下拉框信息进行初始化
function init() {
for (i = 0; i < 10; i++) {
var y = document.createElement("option");//增加一个元素option
y.text = '选项' + i;
var x=document.getElementById("s1");//根据ID找到列表框 x.add(y, null); // } } //把选中的选项移到另一边
function move(s1, s2) {
var index = s1.selectedIndex;
if (index == -1) {
alert("没有选中值");
return;
} s2.length++;
s2.options[s2.length - 1].value = s1.options[index].value;
s2.options[s2.length - 1].text = s1.options[index].text;//s1中当前选中的值赋给s2的最后一个元素
s1.remove(index);//从s1中移除当前元素
} //把一边的完全移到另一边
function moveAll(s1, s2) {
if (s1.length == 0) {
alert("没有可用选择");
return;
}
s2.length = s2.length + s1.length;
for (var i = 0; i < s1.length; i++) {
s2.options[s2.length - s1.length + i].value = s1.options[i].value;
s2.options[s2.length - s1.length + i].text = s1.options[i].text;
} s1.length = 0;
}
</script>
<body>代码:
<body onload="init()">
<table>
<tr>
<td><select id="s1" size=10 style="width:100"></select></td> <td><input type="button" name="moveToRight" value=">"
onClick="move(s1,s2)"> <br>
<br> <input type="button" name="moveAllToRight" value=">>"
onClick="moveAll(s1,s2)"> <br> <input type="button"
name="moveToLeft" value="<" onClick="move(s2,s1)"> <br>
<br> <input type="button" name="moveAllToLeft" value="<<"
onClick="moveAll(s2,s1)"></td>
<td><select id="s2" name="s2" size=10 style="width:100"></select></td> </tr>
</table> </body>
javascript实现组合列表框中元素移动效果的更多相关文章
- javascript 获取iframe里页面中元素值的方法 关于contentWindow和contentDocumen
javascript 获取iframe里页面中元素值的方法 IE方法:document.frames['myFrame'].document.getElementById('test').value; ...
- ie中弹出框中元素的定位
用selenium在ie8浏览器中定位一个弹出框时,直接用ie developer tools可能不一定能定位到,有一个解决的办法是直接在url后面加上#noHide,刷新后,然后再用ie devel ...
- JavaScript实现在文本框中输入空格时自动填写某个值
<script language="javascript" type="text/javascript"> var txtText4 = " ...
- javascript动态改变当前页面中元素的状态行为
function Datea() { var timed = document.getElementById('timed'); var t = setInterval(function TDate( ...
- weui 弹框中的单选效果
<!--性别修改弹框--> <div class="weui_dialog_alert" id="doctorSexDialog" style ...
- (七)对话框,单选框(radiobox),复选框(checkbox),列表框(ListBox),组合框(CComboBox),水平滚动条(Horizontal scroll bar),微调(旋转)spincontrol,列表视图控件CListCtrl,静态控件static
1,模态对话框和非模态对话框 // 模态对话框 void CMainFrame::OnDialogExec() { // TODO: 在此添加命令处理程序代码 // 创建对话框对象 CDialog d ...
- MFC入门示例之组合框(CComboBox)、列表框(CListBox)
1 //添加按钮点击事件 2 void CMFCApplication4Dlg::OnBnClickedButton1() 3 { 4 CString strText; 5 //获取文本框的值 6 G ...
- MFC编程入门之二十四(常用控件:列表框控件ListBox)
前面两节讲了比较常用的按钮控件,并通过按钮控件实例说明了具体用法.本文要讲的是列表框控件(ListBox)及其使用实例. 列表框控件简介 列表框给出了一个选项清单,允许用户从中进行单项或多项选择,被选 ...
- javascript文件夹选择框的两种解决方案
javascript文件夹选择框的两种解决方案 解决方案1:调用windows 的shell,但会有安全问题. * browseFolder.js * 该文件定义了BrowseFolder()函数,它 ...
随机推荐
- 前端面试题-<!DOCTYPE>
现在的各种前端开发工具都足够强大,支持插入模板代码,也就导致我们往往会忽略已经自动生成的代码,而代码的第一行 DOCTYPE 声明,就是最容易忽略的部分. 一.DOCTYPE DOCTYPE 是 do ...
- python实验一
安徽工程大学 Python程序设计实验报告 班级物流管理191 姓名彭艺 学号3190505139成绩 日期 2020年3月3日 指导老师 修宇 实验名称 ...
- Educational Codeforces Round 83 (Rated for Div. 2)A--C
题意:给出一个边数为n的等边多边形,问是否可以变成m的等边多边形.条件是同一个中心,共用原顶点. 解析:直接n%m==0即可,这样就是平分了.签到题没得说了. #include<iostream ...
- 内网渗透之跨边界传输 - LCX转发
跨边界转发 端口转发 lcx 流程 目标机 ./lcx -slave 跳板机ip 监听的端口 127.0.0.1 要转发的端口 跳板机(公网) ./lcx -listen 监听的端口 转发给攻击机访问 ...
- IntelliJ IDEA 2018.3 x64的破解和安装
IntelliJ IDEA 2018.3 x64的破解和安装 前言 IntelliJ IDEA 作为一个优秀的Java开发环境,深受许多开发者喜爱,但是它的价格却贵得让人无法接受,这篇文章将介绍永久激 ...
- Ajax上传数据和上传文件(三种方式)
Ajax向后端发送数据可以有三种方式:原生Ajax方式,jQuery Ajax方式,iframe+form 方式(伪造Ajax方式) <!DOCTYPE html> <html la ...
- turtle学习笔记
1.turtle的绘图窗体 turtle.setup(width, height, startx,starty) - setup()设置窗体大小及位置- 4个参数中后两个可选(后两个省略时默认窗口在屏 ...
- (转)协议森林02 小喇叭开始广播 (以太网与WiFi协议)
协议森林02 小喇叭开始广播 (以太网与WiFi协议) 作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 我们在邮差与邮局中说到,以 ...
- Redis详解(一)
redis简介 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多 包括string(字符串).list(链表).set(集合).zset(sor ...
- Python-函数练习题1
# coding=utf-8 '''定义一个方法get_num(num),num参数是列表类型,判断列表里面的元素为数字类型.其他类型则报错, 并且返回一个偶数列表:(注:列表里面的元素为偶数).'' ...