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. python学习笔记013——推导式

    1 推导式简介 推导式comprehensions(又称解析式),是Python的一种独有特性. 推导式是可以从一个数据序列构建另一个新的数据序列的结构体. 推导式有三种形式: 1)列表推导式 (li ...

  2. Microsoft Excel不能访问文件

    Microsoft Excel 不能访问文件"C:\Users\james\Documents\test.xls". 可能的原因有以下几个: • 文件名称或路径不存在. • 文件正 ...

  3. Android studio 使用NDK工具实现JNI编程

    前言: Android开发中常常会使用到第三方的.so库.在使用.so库的时候就要用到JNI编程.JNI是Java Native Interface的缩写.它提供了若干的API实现了Java和其它语言 ...

  4. android动画具体解释一 概述

    动画和图形概述 Android 提供了大量的强大的API以应用于UI动画和绘制2D和3D图形.以下各节向你描写叙述了这些API的预览和系统能力以帮助你决定怎么才是达到你需求的最佳方法. 动画 Andr ...

  5. 分享五：php数组操作

    一:PHP中array_merge和array相加的区别分析 1:键名是string: <?php $arr1 = array('a'=>'PHP'); $arr2 = array('a' ...

  6. javascript ES6模块化

    一.将模块导出去 /* *将模块导出去 *a.js文件 */ const a=12; export default a; /* *将模块导出去 *b.js文件 */ const a=5; export ...

  7. Oracle学习笔记之四，SQL语言入门

    1. SQL语言概述 1.1 SQL语言特点 集合性,SQL可以的高层的数据结构上进行工作,工作时不是单条地处理记录,而对数据进行成组的处理. 统一性,操作任务主要包括:查询数据:插入.修改和删除数据 ...

  8. Mysql 操作命令 详解

    目的:1. 掌握mysql的安装,建库.建表.表的三种基本操作.查询.多表查询.数据库的备份与恢复2. MYSQL 服务器的简单维护3. mysql+apache+php的环境搭建 一.如何安装mys ...

  9. js冒泡法和数组转换成字符串示例代码

    将数组转换成字符串的方法有很多,讲解下js冒泡法的使用.js代码: //js冒泡法与数据转换为字符串的例子 //整理:www.jbxue.com window.onload = function(){ ...

  10. JNI中GetStringChars函数中的isCopy

    一直不明白这个isCopy是什么意思,只知道每次使用的时候都传NULL,今天看到了相关的资料,特来分享下. 当从JNI函数GetStringChars中返回得到字符串B时,如果B是原始字符串java. ...