自己写的jQuery 左右选择框,大家多多指教!
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <HTML>
- <HEAD>
- <TITLE> New Document </TITLE>
- <META NAME="Generator" CONTENT="EditPlus">
- <META NAME="Author" CONTENT="">
- <META NAME="Keywords" CONTENT="">
- <META NAME="Description" CONTENT="">
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
- <style>
- .sel{width:150px;height:200px;}
- .btn{width:50px;font-weight:bold;font-size:14px; }
- </style>
- </HEAD>
- <BODY>
- <table>
- <tr>
- <td>
- <select multiple class="sel" id="sel_left">
- <option value="a">aaaaaaaaaaa</option>
- <option value="b">bbbbbbbbbbb</option>
- <option value="c">ccccccccccc</option>
- <option value="d">ddddddddddd</option>
- <option value="e">eeeeeeeeeee</option>
- </select>
- </td>
- <td>
- <p><button class="btn" id="btn_1">>> </button></p>
- <p><button class="btn" id="btn_2">></button></p>
- <p><button class="btn" id="btn_3"><</button></p>
- <p><button class="btn" id="btn_4"><<</button></p>
- </td>
- <td>
- <select multiple class="sel" id="sel_right">
- <option value="f">fffffffffff</option>
- </select>
- </td>
- </tr>
- </table>
- </BODY>
- <script>
- $(function(){
- $("#sel_left,#sel_right").bind("change",checkBtn);
- $("#btn_1,#btn_2,#btn_3,#btn_4").bind("click",clickBtn);
- checkBtn();
- });
- function checkBtn(){
- jQuery("#sel_left>option").length > 0 ? jQuery("#btn_1").removeAttr("disabled") : jQuery("#btn_1").attr("disabled","disabled");
- jQuery("#sel_left option:selected").length > 0 ? jQuery("#btn_2").removeAttr("disabled") : jQuery("#btn_2").attr("disabled","disabled");
- jQuery("#sel_right option:selected").length > 0 ? jQuery("#btn_3").removeAttr("disabled") : jQuery("#btn_3").attr("disabled","disabled");
- jQuery("#sel_right>option").length > 0 ? jQuery("#btn_4").removeAttr("disabled") : jQuery("#btn_4").attr("disabled","disabled");
- }
- function clickBtn(e){
- if("btn_1" == e.target.id){
- jQuery("#sel_left>option").appendTo("#sel_right");
- }else if("btn_2" == e.target.id){
- jQuery("#sel_left option:selected").appendTo("#sel_right");
- }else if("btn_3" == e.target.id){
- jQuery("#sel_right option:selected").appendTo("#sel_left");
- }else if("btn_4" == e.target.id){
- jQuery("#sel_right>option").appendTo("#sel_left");
- }
- checkBtn();
- }
- </script>
- </HTML>
自己写的jQuery 左右选择框,大家多多指教!的更多相关文章
- jQuery左右选择框
<!DOCTYPE html> <html> <head> <title>左右选择框</title> <style type=&quo ...
- JQuery 日期选择框
一 jeDate日期控件,关于官方的文档请查看: http://www.jayui.com/jedate/ 1 引入js文件 <script type="text/javascr ...
- 用jquery修改默认的单选框radio或者复选框checkbox选择框样式
默认的radio和checkbox选框很难看.我去看了一下qq注册的页面.发现单选和复选框并没有用<input>,居然是用是A标签.然后用css背景图片展示选择框,用JavaScript控 ...
- jQuery插件——下拉选择框
其实,之前也写过jQuery插件,今天写的是一个模拟select选择的下拉插件. 既然是jQuery插件,那么必然是依赖jQuery的了. 老规矩,直接上代码吧! ;(function () { $. ...
- FancySelect – 更好用的 jQuery 下拉选择框插件
FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...
- jquery取消选择select下拉框
有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: <select name=&q ...
- 基于jQuery美化联动下拉选择框
今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...
- ul+jquery自定义下拉选择框
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- jquery.chosen.js下拉选择框美化插件项目实例
由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...
随机推荐
- 配置SELINUX
selinux的配置文件:# more /etc/selinux/config # This file controls the state of SELinux on the system. # S ...
- Form_Form Builder的常用方法(概念)
2014-07-07 Created By BaoXinjian
- js数组基本知识
1.数组的引出 用数组解决王大爷养乌龟的问题: var weights=[3,5,1,3.4,2,50]; var all_weight=0; var avg_weight=0; for (i=0;i ...
- 博客目录之C#
C# BackgroundWorker的Bug??? C# BeginInvoke和EndInvoke方法 c# 高效的线程安全队列ConcurrentQueue C# ManualResetEven ...
- laravel 如何引入自己的函数或类库
例如在app下建一个Common文件夹 在Common下建一个function.php 放入公共函数 例如: function test(){ echo 'this is a test'; } 在项目 ...
- INFINITY的一个坑
float a=INFINITY; if(a==INFINITY){ cout<<"a is inf"<<endl; }else{ cout<< ...
- Spring的三种注入方式(Setter、构造函数和自动注入)
一.Setter注入 这里我是希望在Student.java中调用Course.java中的内容. public class Course { public String name = "数 ...
- Hadoop本地库介绍及相关问题解决方法汇总
1.hadoop本地库的作用是什么?2.哪两个压缩编码器必须使用hadoop本地库才能运行?3.hadoop的使用方法?4.hadoop本地库与系统版本不一致会引起什么错误?5.$ export HA ...
- [Python]南邮OJ代码备份爬虫
之前看过Python学习的经验,说以project为导向学习. 自己分析了一下,一般接触Python的都有一定的其它语言基础,对于程序设计的基本逻辑,语法都有一个大概的了解.而Python这样的脚本语 ...
- MSSQLid清零
truncate table [cellphone2016].[dbo].[tp_phone_9]