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. 配置SELINUX

    selinux的配置文件:# more /etc/selinux/config # This file controls the state of SELinux on the system. # S ...

  2. Form_Form Builder的常用方法（概念）

    2014-07-07 Created By BaoXinjian

  3. js数组基本知识

    1.数组的引出 用数组解决王大爷养乌龟的问题: var weights=[3,5,1,3.4,2,50]; var all_weight=0; var avg_weight=0; for (i=0;i ...

  4. 博客目录之C#

    C# BackgroundWorker的Bug??? C# BeginInvoke和EndInvoke方法 c# 高效的线程安全队列ConcurrentQueue C# ManualResetEven ...

  5. laravel 如何引入自己的函数或类库

    例如在app下建一个Common文件夹 在Common下建一个function.php 放入公共函数 例如: function test(){ echo 'this is a test'; } 在项目 ...

  6. INFINITY的一个坑

    float a=INFINITY; if(a==INFINITY){ cout<<"a is inf"<<endl; }else{ cout<< ...

  7. Spring的三种注入方式（Setter、构造函数和自动注入）

    一.Setter注入 这里我是希望在Student.java中调用Course.java中的内容. public class Course { public String name = "数 ...

  8. Hadoop本地库介绍及相关问题解决方法汇总

    1.hadoop本地库的作用是什么?2.哪两个压缩编码器必须使用hadoop本地库才能运行?3.hadoop的使用方法?4.hadoop本地库与系统版本不一致会引起什么错误?5.$ export HA ...

  9. [Python]南邮OJ代码备份爬虫

    之前看过Python学习的经验,说以project为导向学习. 自己分析了一下,一般接触Python的都有一定的其它语言基础,对于程序设计的基本逻辑,语法都有一个大概的了解.而Python这样的脚本语 ...

  10. MSSQLid清零

    truncate table [cellphone2016].[dbo].[tp_phone_9]