JS下拉框内容左右移动效果的具体实现


Posted in Javascript onJuly 10, 2013
<HTML>
<HEAD>
<TITLE>选择下拉菜单</TITLE>
<META NAME="Description" CONTENT="Power by hill">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</HEAD>
<BODY>
<p>选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选),或在选择项上双击进行添加和移除。</p>
<form method="post" name="myform">
<table border="0" width="300">
<tr>
<td width="40%">
<select style="WIDTH:100%" multiple name="list1" size="12" ondblclick="moveOption(document.myform.list1, document.myform.list2)">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="山东">山东</option>
<option value="安徽">安徽</option>
<option value="重庆">重庆</option>
<option value="福建">福建</option>
<option value="甘肃">甘肃</option>
<option value="广东">广东</option>
<option value="广西">广西</option>
<option value="贵州">贵州</option>
<option value="海南">海南</option>
<option value="河北">河北</option>
<option value="黑龙江">黑龙江</option>
</select>
</td>
<td width="20%" align="center">
<input type="button" value="添加" onclick="moveOption(document.myform.list1, document.myform.list2)"><br/>
<br/>
<input type="button" value="删除" onclick="moveOption(document.myform.list2, document.myform.list1)">
</td>
<td width="40%">
<select style="WIDTH:100%" multiple name="list2" size="12" ondblclick="moveOption(document.myform.list2, document.myform.list1)">
</select>
</td>
<td>
<button onclick="changepos(list2,-1)" type="button">上移</button>
<br/>
<button onclick="changepos(list2,1)" type="button">下移</button>
</td>
</tr>
</table>
值:<input type="text" name="city" size="40">
</form>
<script language="JavaScript">
function moveOption(e1, e2){
try{
for(var i=0;i<e1.options.length;i++){
if(e1.options[i].selected){
var e = e1.options[i];
e2.options.add(new Option(e.text, e.value));
e1.remove(i);
ii=i-1
}
}
document.myform.city.value=getvalue(document.myform.list2);
}
catch(e){}
}
function getvalue(geto){
var allvalue = "";
for(var i=0;i<geto.options.length;i++){
allvalue +=geto.options[i].value + ",";
}
return allvalue;
}
function changepos(obj,index)
{
if(index==-1){
if (obj.selectedIndex>0){
obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1))
}
}
else if(index==1){
if (obj.selectedIndex<obj.options.length-1){
obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex+1))
}
}
}
</script>
</BODY>
</HTML>
Javascript 相关文章推荐
一段非常简单的让图片自动切换js代码
Nov 10 Javascript
jQuery选择头像并实时显示的代码
Jun 27 Javascript
js日期时间补零的小例子
Mar 05 Javascript
javascript面向对象之定义成员方法实例分析
Jan 13 Javascript
JavaScript实现仿网易通行证表单验证
May 25 Javascript
javascript实现控制的多级下拉菜单
Jul 05 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
Bootstrap安装环境配置教程分享
May 27 Javascript
jQuery封装的屏幕居中提示信息代码
Jun 08 Javascript
VUE页面中加载外部HTML的示例代码
Sep 20 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 #Javascript
关于js遍历表格的实例
Jul 10 #Javascript
js浮动图片的动态效果
Jul 10 #Javascript
JS文本框默认值处理详解
Jul 10 #Javascript
JS实现点击下载的小例子
Jul 10 #Javascript
javascript 得到文件后缀名的思路及实现
May 09 #Javascript
让js弹出窗口居前显示的实现方法
Jul 10 #Javascript
You might like
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
jQuery生成asp.net服务器控件的代码
2010/02/04 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
2014/03/19 Javascript
js使用心得分享
2015/01/13 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10
2020/12/12 DOTA
Python3.x和Python2.x的区别介绍
2013/02/12 Python
Python中的类学习笔记
2014/09/23 Python
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
python中cPickle类使用方法详解
2018/08/27 Python
django session完成状态保持的方法
2018/11/27 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
幼儿园课题实施方案
2014/05/14 职场文书
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL
Ubuntu18.04下QT开发Android无法连接设备问题解决实现
2022/06/01 Java/Android
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技