本文实例讲述了select选择框内容左右移动添加删除。分享给大家供大家参考。具体如下:
select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,双击option内容也可左右移动,支持单选移动、多选移动和一键全部移动!
运行效果图: ----------------------查看效果-----------------------
小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的代码如下
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>select选择框内容左右移动添加删除代码</title> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;outline:none;} a,img{border:0;} body{font:12px/normal "microsoft yahei";} .selectbox{width:500px;height:220px;margin:100px auto;} .selectbox div{float:left;} .selectbox .select-bar{padding:0 20px;} .selectbox .select-bar select{width:150px;height:200px;border:1px #A0A0A4 solid;padding:4px;font-size:14px;font-family:"microsoft yahei";} .btn-bar{} .btn-bar p{margin-top:16px;} .btn-bar p .btn{width:50px;height:30px;cursor:pointer;font-family:simsun;font-size:14px;} </style> <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.8.3.min.js">以上就是为大家分享的select选择框内容左右移动添加删除代码,希望大家可以喜欢。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
桃源资源网 Design By www.nqtax.com
暂无“基于jquery实现select选择框内容左右移动添加删除代码分享”评论...