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. 如何不让DataGridView自动生成列

    如果不想让DataGridView自动生成与数据源对应的列, 只需要把属性AutoGenerateColumns设为false即可. 需要注意: 在界面设计的属性窗口中是看不到AutoGenerate ...

  2. FA_会计中的折旧方式的种类（概念）

    2014-06-08 Created By BaoXinjian

  3. PLSQL_SQL Loader的概念和用法（概念）

    2014-06-08 Created By BaoXinjian

  4. 文件描述符file descriptor与inode的相关知识

    每个进程在Linux内核中都有一个task_struct结构体来维护进程相关的 信息,称为进程描述符(Process Descriptor),而在操作系统理论中称为进程控制块 (PCB,Process ...

  5. C#实现WinForm下DataGridView控件的拷贝和粘贴

    DataGridView控件应该是数据库应用系统最常用的控件之一,其方便性不言而喻的.往往用户在使用过程中会提出"从DataGridView空间 中拷贝数据或是向某个DataGridView ...

  6. 分享Memcached shell启动停止脚本

    注意:要使用这个shell,必须先成功建立memcache环境 1>建立memcached文件和权限 [root@luozhonghua ~]# touch /etc/init.d/memcac ...

  7. 【Android】3.0 第3章 百度地图及其应用--预备知识

    分类:C#.Android.VS2015.百度地图应用: 创建日期:2016-02-04 一.概述 这一章先来点有意思的百度地图应用示例,然后再分章详细介绍用C#开发Android App的各种基本技 ...

  8. Mac OSX安装 GitLab 5.x

    1)安装mac 2) 创建git用户和git组 4) 安装XCode 5) 安装命令行组件 6) 安装 Home brew $ ruby -e "$(curl -fsSL https://r ...

  9. 树形列表 jqtree数据 使用

    jqtree调试笔记 用的是data-url的方式从远程加载的数据返回的数据格式须要是json,当然也可以使用text模式,但是恐怕要自己写格式的解析了 其中返回数据的时候,是在这个函数的末尾_loa ...

  10. LINQ架构简单描述

    写在前面的话:课堂上老师只是简单提了一下LINQ,当时听着老师对它的描述,感觉非常神奇,不用去操作繁琐的SQL语句了,读取数据库的操作居然能向写C#代码一样方便,但是一直没有机会去学习使用它. LIN ...