模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
网页特效代码
模板无忧
>
网页特效
>
表单按钮特效代码
>
收藏
分享
查看评论
表单按钮
演示
可上移下移的下拉选择框_表单按钮特效
查看演示效果
特效Tag:
下拉选择框
添加
一个可以添加数据、删除数据、移动数据的下拉选择框,记得在一些人才网站经常看到这种功能。
<html> <head> <title>下拉选择框</title> </head> <script> function move(fbox,tbox) { var i = 0; if(fbox.value != "") { var no = new Option(); no.value = fbox.value; no.text = fbox.value; tbox.options[tbox.options.length] = no; fbox.value = ""; } } function remove(box) { for(var i=0; i<box.options.length; i++) { if(box.options[i].selected && box.options[i] != "") { box.options[i].value = ""; box.options[i].text = ""; } } BumpUp(box); } function BumpUp(abox) { for(var i = 0; i < abox.options.length; i++) { if(abox.options[i].value == "") { for(var j = i; j < abox.options.length - 1; j++) { abox.options[j].value = abox.options[j + 1].value; abox.options[j].text = abox.options[j + 1].text; } var ln = i; break; } } if(ln < abox.options.length) { abox.options.length -= 1; BumpUp(abox); } } function Moveup(dbox) { for(var i = 0; i < dbox.options.length; i++) { if (dbox.options[i].selected && dbox.options[i] != "" && dbox.options[i] != dbox.options[0]) { var tmpval = dbox.options[i].value; var tmpval2 = dbox.options[i].text; dbox.options[i].value = dbox.options[i - 1].value; dbox.options[i].text = dbox.options[i - 1].text dbox.options[i-1].value = tmpval; dbox.options[i-1].text = tmpval2; } } } function Movedown(ebox) { for(var i = 0; i < ebox.options.length; i++) { if (ebox.options[i].selected && ebox.options[i] != "" && ebox.options[i+1] != ebox.options[ebox.options.length]) { var tmpval = ebox.options[i].value; var tmpval2 = ebox.options[i].text; ebox.options[i].value = ebox.options[i+1].value; ebox.options[i].text = ebox.options[i+1].text ebox.options[i+1].value = tmpval; ebox.options[i+1].text = tmpval2; } } } </script> </head> <body> <form ACTION="" METHOD="POST"> <table align="center"> <tr> <td> <input type="text" name="list1" value=""> </td> <td> <input type="button" value="添加新值" onclick="move(this.form.list1,this.form.list2)" name="B1"><br> <input type="button" value="删除选中" onclick="remove(this.form.list2)" name="B2"><br><br> <input type="button" value="向上移动" onclick="Moveup(this.form.list2)" name="B3"><br> <input type="button" value="向下移动" onclick="Movedown(this.form.list2)" name="B4"> </td> <td> <select multiple size=7 name="list2"> <option value="1">mb5u.com</option> <option value="2">Baidu.com</option> <option value="3">Sohu.com</option> </select> </td> </tr> </table> </form> </body> </html>
所属频道:
表单按钮特效
/
更新时间:2013-01-08
[收藏]
[报错]
[返回列表]
相关
表单按钮特效
:
又一个带描述的表单
可自由移动位置的导航条
页面转跳。跟本站的教学文章中的那些转到第几页一样的
带Checkbox的列表框
提供四种打开新窗的形式
自动复制代码
方便登录各种管理页面以及任何EMAIL量身定做!
QQ分类搜索代码
查找表格的内容
一个带描述的表单
常用email检验函数
file框模拟新解
表单按钮特效Rss订阅
特效代码搜索
表单按钮特效推荐
CSS实现虚线边框的文本框
JavaScript自动复制文本框内容至另一个
点击按钮后,文本框变为Select下拉列表框
窗口打开关闭铵钮
让输入框出现下拉列表式的提示
连接说明浮动条脚本
点击文本框后才加载验证码的JS代码
鼠标放上按钮后,按钮更换颜色
双击编辑可修改状态的JS实现
点击单选框将值添加至文本输入框
猜你也喜欢看这些
阴阳日历对照表
Js网页版数字时钟
在状态栏显示时间
选择日期
比较特别的JS撞击游戏代码
多种地域的时间显示
坐标图
在线日历
百度的Js日历,值得一看
语言时钟
相关链接:
复制本页链接
|
搜索可上移下移的下拉选择框
特效说明:
表单按钮模板
-
可上移下移的下拉选择框
。