jQuery左右选择框
<!DOCTYPE html>
<html>
<head>
<title>左右选择框</title> <style type="text/css">
/*.s1{width:120px;}
#d1{width:510px;height:320px;background-color:#F5DEB3;margin:0 auto;}
#d2{height:30px;font-size:24px;background-color:blue;color:white;}
#d3{padding-left:30px;}*/
</style> <script type="text/javascript" src="./jquery-1.4.3.js"></script>
</head>
<body>
<div id="d1">
<div id="d2">选择</div>
<div id="d3">
<table cellpadding="0" cellspacing="8">
<tbody><tr>
<td>左</td>
<td> </td>
<td>右</td>
</tr>
<tr>
<td>
<select id="s1" name="s1" style="width:150px; height:220px;" multiple="multiple"> <option value="hh">W1</option> </select>
</td>
<td>
<p><input id="b1" type="button" class="s1" value="-->"></p>
<p><input type="button" id="b2" class="s1" value="-->>"></p>
<p><input type="button" id="b3" class="s1" value="<--"></p>
<p><input type="button" id="b4" class="s1" value="<<--"></p>
</td>
<td><select id="s2" name="s2" style="width:150px;height:220px;" multiple="multiple"><option value="zsf">12321</option><option value="xrr">23</option></select></td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
$(function(){ $('#b1').click(function(){
$obj = $('select option:selected').clone(true);
if($obj.size() == 0){
alert("请至少选择一条!");
}
$('#s2').append($obj);
$('select option:selected').remove();
}); $('#b2').click(function(){
$('#s2').append($('#s1 option'));
}); $('#b3').click(function(){
$obj = $('select option:selected').clone(true);
if($obj.size() == 0){
alert("请至少选择一条!");
}
$('#s1').append($obj);
$('select option:selected').remove();
}); $('#b4').click(function(){
$('#s1').append($('#s2 option'));
}); $('option').dblclick(function(){
var flag = $(this).parent().attr('id');
if(flag == "s1"){
var $obj = $(this).clone(true);
$('#s2').append($obj);
$(this).remove();
} else {
var $obj = $(this).clone(true);
$('#s1').append($obj);
$(this).remove();
}
}); });
</script>
</body> </html>
引入jQuery即可
jQuery左右选择框的更多相关文章
- JQuery 日期选择框
一 jeDate日期控件,关于官方的文档请查看: http://www.jayui.com/jedate/ 1 引入js文件 <script type="text/javascr ...
- 自己写的jQuery 左右选择框,大家多多指教!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...
- FancySelect – 更好用的 jQuery 下拉选择框插件
FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...
- jquery取消选择select下拉框
有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: <select name=&q ...
- 基于jQuery美化联动下拉选择框
今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...
- 用jquery修改默认的单选框radio或者复选框checkbox选择框样式
默认的radio和checkbox选框很难看.我去看了一下qq注册的页面.发现单选和复选框并没有用<input>,居然是用是A标签.然后用css背景图片展示选择框,用JavaScript控 ...
- ul+jquery自定义下拉选择框
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery插件——下拉选择框
其实,之前也写过jQuery插件,今天写的是一个模拟select选择的下拉插件. 既然是jQuery插件,那么必然是依赖jQuery的了. 老规矩,直接上代码吧! ;(function () { $. ...
- jquery.chosen.js下拉选择框美化插件项目实例
由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...
随机推荐
- Python将一个大文件按段落分隔为多个小文件的简单方法
今天帮同学处理一点语料. 语料文件有点大,而且是以连续两个换行符作为段落标志,他想把它按段落分隔成多个小文件.即每3个段落组成一个新文件.因为曾经没有遇到过类似的操作,在网上找了一些类似的方法,看起来 ...
- django+nginx+uwsgi 项目部署
Django虽然自带一个Server,但只能作为开发时测试使用,我们需要一个可以稳定而持续的服务器对网站进行部署,比如Apache, Nginx, lighttpd等,本篇将利用nginx和uWSGI ...
- 萌新学习Python爬取B站弹幕+R语言分词demo说明
代码地址如下:http://www.demodashi.com/demo/11578.html 一.写在前面 之前在简书首页看到了Python爬虫的介绍,于是就想着爬取B站弹幕并绘制词云,因此有了这样 ...
- Excel小笔记——冻结窗格
excel提供了冻结首行首列功能 但是, 大部分时间我们是希望 冻结多行窗格 方法:选中要冻结多行窗格的下一行,点击视图——冻结拆分窗格
- 详解Struts1中的struts-config.xml配置文件【一】
搞清楚struts-config.xml中各项元素的作用,对于我们构建web项目有莫大的好处.<struts-config>是struts的根元素,它主要有8个子元素,DTD定义如下: & ...
- Laravel 项目开发规范
参考:https://fsdhub.com/books/laravel-specification
- vb.net winform exe 接参数
找到如下文件 -\WindowsApplication1\My Project\Application.Designer.vb <Global.System.Diagnostics.Debugg ...
- 点滴积累【C#】---验证码,ajax提交
效果: 思路: 借用ashx文件创建四位验证,首先生成四位随机数字.然后创建画布,再将创建好的验证码存入session,然后前台进行button按钮将文本框中的值进行ajax请求到后台,和sessio ...
- ubuntu下ssh设置firefox用的反向代理
mark一下: ssh -D 127.0.0.1:8080 -l root MyIp
- Sublime Text 2 入门与总结
Sublime Text 2 入门与总结 首语 : 考完试,但又没什么兴趣做课程设计,蛋疼的弄点软件入门的介绍,希望给各位还在吃香蕉的程序猿带来一点启示... 代码编辑器,就像武侠中的武 ...