1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <TITLE> New Document </TITLE>
  5. <META NAME="Generator" CONTENT="EditPlus">
  6. <META NAME="Author" CONTENT="">
  7. <META NAME="Keywords" CONTENT="">
  8. <META NAME="Description" CONTENT="">
  9. <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
  10. <style>
  11. .sel{width:150px;height:200px;}
  12. .btn{width:50px;font-weight:bold;font-size:14px; }
  13. </style>
  14. </HEAD>
  15. <BODY>
  16. <table>
  17. <tr>
  18. <td>
  19. <select multiple class="sel" id="sel_left">
  20. <option value="a">aaaaaaaaaaa</option>
  21. <option value="b">bbbbbbbbbbb</option>
  22. <option value="c">ccccccccccc</option>
  23. <option value="d">ddddddddddd</option>
  24. <option value="e">eeeeeeeeeee</option>
  25. </select>
  26. </td>
  27. <td>
  28. <p><button class="btn" id="btn_1">&gt;&gt; </button></p>
  29. <p><button class="btn" id="btn_2">&gt;</button></p>
  30. <p><button class="btn" id="btn_3">&lt;</button></p>
  31. <p><button class="btn" id="btn_4">&lt;&lt;</button></p>
  32. </td>
  33. <td>
  34. <select multiple class="sel" id="sel_right">
  35. <option value="f">fffffffffff</option>
  36. </select>
  37. </td>
  38. </tr>
  39. </table>
  40. </BODY>
  41. <script>
  42. $(function(){
  43. $("#sel_left,#sel_right").bind("change",checkBtn);
  44. $("#btn_1,#btn_2,#btn_3,#btn_4").bind("click",clickBtn);
  45. checkBtn();
  46. });
  47. function checkBtn(){
  48. jQuery("#sel_left>option").length > 0 ? jQuery("#btn_1").removeAttr("disabled") : jQuery("#btn_1").attr("disabled","disabled");
  49. jQuery("#sel_left option:selected").length > 0 ? jQuery("#btn_2").removeAttr("disabled") : jQuery("#btn_2").attr("disabled","disabled");
  50. jQuery("#sel_right option:selected").length > 0 ? jQuery("#btn_3").removeAttr("disabled") : jQuery("#btn_3").attr("disabled","disabled");
  51. jQuery("#sel_right>option").length > 0 ? jQuery("#btn_4").removeAttr("disabled") : jQuery("#btn_4").attr("disabled","disabled");
  52. }
  53. function clickBtn(e){
  54. if("btn_1" == e.target.id){
  55. jQuery("#sel_left>option").appendTo("#sel_right");
  56. }else if("btn_2" == e.target.id){
  57. jQuery("#sel_left option:selected").appendTo("#sel_right");
  58. }else if("btn_3" == e.target.id){
  59. jQuery("#sel_right option:selected").appendTo("#sel_left");
  60. }else if("btn_4" == e.target.id){
  61. jQuery("#sel_right>option").appendTo("#sel_left");
  62. }
  63. checkBtn();
  64. }
  65. </script>
  66. </HTML>

自己写的jQuery 左右选择框，大家多多指教！的更多相关文章

  1. jQuery左右选择框

    <!DOCTYPE html> <html> <head> <title>左右选择框</title> <style type=&quo ...

  2. JQuery 日期选择框

    一    jeDate日期控件,关于官方的文档请查看: http://www.jayui.com/jedate/ 1 引入js文件 <script type="text/javascr ...

  3. 用jquery修改默认的单选框radio或者复选框checkbox选择框样式

    默认的radio和checkbox选框很难看.我去看了一下qq注册的页面.发现单选和复选框并没有用<input>,居然是用是A标签.然后用css背景图片展示选择框,用JavaScript控 ...

  4. jQuery插件——下拉选择框

    其实,之前也写过jQuery插件,今天写的是一个模拟select选择的下拉插件. 既然是jQuery插件,那么必然是依赖jQuery的了. 老规矩,直接上代码吧! ;(function () { $. ...

  5. FancySelect – 更好用的 jQuery 下拉选择框插件

    FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...

  6. jquery取消选择select下拉框

    有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: <select name=&q ...

  7. 基于jQuery美化联动下拉选择框

    今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...

  8. ul+jquery自定义下拉选择框

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. jquery.chosen.js下拉选择框美化插件项目实例

    由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...

随机推荐

  1. 连表查询都用Left Join吧 以Windows服务方式运行.NET Core程序 HTTP和HTTPS的区别 ASP.NET SignalR介绍 asp.net—WebApi跨域 asp.net—自定义轻量级ORM C#之23中设计模式

    连表查询都用Left Join吧   最近看同事的代码,SQL连表查询的时候很多时候用的是Inner Join,而我觉得对我们的业务而言,99.9%都应该使用Left Join(还有0.1%我不知道在 ...

  2. Interface_GL通过gl_interface导入日记账（案例）

    2014-06-17 BaoXinjian

  3. Linux使用技巧5--格式化U盘

    通常来说,格式化一个分区的U盘还是非常easy的.仅仅须要使用mkfs命令指定目标文件系统就能够了,样例例如以下: $ sudo fdisk -l $ sudo mkfs -t vfat /dev/s ...

  4. jenkins构建自动执行jmeter 发送http请求，中间有替换参数路径

    #在构建目录下创建jmeter目录,在这个目录下面执行jmeter性能测试mkdir -p $WORKSPACE/target/apache-jmeter-3.1/#复制jmeter文件到执行测试目录 ...

  5. Oracle学习笔记之一，重温范式

    第一范式(1NF) 第一范式是第二和第三范式的基础,是最基本的范式.第一范式包括下列的指导原则: 数据组的每个属性只可以包含一个值. 关系中的每个数组必须只包含相同数量的值. 关系中的每个数组一定不能 ...

  6. 子墨庖丁Android的ActionBar源代码分析 (一）实例化

    假设你从事过Androidclient开发,相信你对ActionBar这套框架并不陌生,或者说你并不了解它,可是你应该时不时的要跟它打交道.抛开ActionBar的实现不说,ActionBar实际上是 ...

  7. js动态给table添加/删除tr的方法

    js动态给table添加/删除tr的方法. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ...

  8. [svc]lnmp一键安装脚本(含有np与mysql分离)

    基于lanny一键安装包:(含lnmp所需软件及配置文件) 安装nginx: wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliy ...

  9. 【Android】3.8 定位图层展示

    分类:C#.Android.VS2015.百度地图应用: 创建日期:2016-01-27 一.简介 Android定位SDK v6.2.2(全球定位支持)提供GPS.基站.Wi-Fi等多种定位方式,适 ...

  10. 教你轻松自己定义ViewPagerIndicator

    ViewPagerIndicator集成分页指示器.事实上就是标题栏和ViewPager的联动效果,大家先看一下效果图直观了解:(图侵删) 这篇文章将会教大家怎么简单高速地制作自己的ViewPager ...