自己写的jQuery 左右选择框，大家多多指教！

Html代码  

  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 左右选择框，大家多多指教！

时间： 2024-10-06 18:13:19

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

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

默认的radio和checkbox选框很难看.我去看了一下qq注册的页面.发现单选和复选框并没有用<input>,居然是用是A标签.然后用css背景图片展示选择框,用JavaScript控制切换.然后我自己用jqeury写了一个这样功能的. 先是html代码 性别 <div id="box-6"> <label>性别</label> <a href="#" name="male" id=&qu

jQuery插件——下拉选择框

其实,之前也写过jQuery插件,今天写的是一个模拟select选择的下拉插件. 既然是jQuery插件,那么必然是依赖jQuery的了. 老规矩,直接上代码吧! ;(function () { $.fn.extend({ dropdown:function (options) { return this.each(function (i, val) { $(val).css("position", "relative"); // 设置默认参数 var opts =

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

今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="container"> <div class="inner"> <section id="main_content"

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

由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生变化.为了界面的美观,不得已查资料寻找另外的插件. 使用jquery.chosen.js下拉选择框美化插件同样也能达到类似效果 完成效果如下 实现步骤如下 1.导入相关文件 <link rel="stylesheet" href="${ctxStatic}/css/chos

CSS3+Jquery实现带动画效果的下拉选择框

CSS3+JQuery实现带动画效果的下拉选择框. 元素结构为: 1 <div class="box"> 2 <p>this is the first li</p> 3 <div id="blank"></div> 4 <ul> 5 <li class="selected">this is the first li</li> 6 <li >

[jQuery编程挑战]004 针对选择框词典式排序

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"/> <title>针对选择框词典式排序</title> <script type="text/javascript" src="../js/jquery-1.11.0.js"></script> <scr

左右选择框 js插件

随着项目的进展,测试工程师在更多的浏览器中兼容性测试中,发现有些浏览器不支持option的触发事件,这就造成了先前一篇博文bootstrap 左右框多项选择示例 中左右选择框的失效,于是我就由原先的select-option结构 改成了 现在的 ul-li 结构,并写成了js插件的形式,方便以后调用和修改,并在多个浏览器测试中得到验证: 实现的页面如下: jsp页面的修改如下: 1 <div id="province_dchannel"> 2 <div class=&

二期项目总结（一） 通过a标签打开文件上传选择框，使用Ajax上传文件

很多时候我们会给a标签增加一个点击事件,用于上传文件.为什么不使用原滋原味的文本打开按钮呢?当然是不好看,而且样式难以控制. 这时候可以通过控制a标签,给它添加一个点击事件,在a标签触发点击事件的时候打开文本选择框,就很好看了. 好了,现在来上思路: 先要给出一个a标签和文本选择的打开input,但是这个input的display要设置为none, 如下: <a id="uoloadA" onclick="ClickInput()">上传文件</a

兼容ie8的多选下拉选择框

说下写这个东东的原因:最近要写一个兼容ie8的项目,我一出来工作就是数据驱动的框架了.所以对不支持vue的ie8.真的是脑壳疼. 最后考察了一番,决定使用 layui这个官网宣城兼容人类正在使用的全部浏览器(IE6/7除外)的Ui 刚开始用着,好像也是挺香的,相对于其他兼容ie8的ui,各方面都好很多. 慢慢的,蛋疼的时候来了,就是layui的多选下拉对ie8不支持. 接着,就开始百度各种多选下拉插件(还是懒啊,啥都想用现成的),耗费大量精力测试修改,都不尽人意,好多都是标题单,宣称支持ie8,