query实现可以左右的下拉菜单效果
2012-03-28 20:09
288 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可以左右选择的下拉菜单效果</title>
<script language="javascript" type="text/javascript" src="../include/jquery.js"></script>
<script language="javascript" type="text/javascript">
//使用jquery加载事件
$(document).ready(function (){
/*****************************************/
//处理向右侧添加一个选项的事件
$("#right-one").click(function (){
//向右侧添加一个
// 父(要插入的地方) //子,插入的内容
$('#second').append($('#first option:selected'));
});
/********************处理向右插入全部*********************/
$("#right-all").click(function (){
//向右侧添加全部
// 父(要插入的地方) //子,插入的内容
$('#second').append($('#first option'));
});
/*******************向左侧添加单个**********************/
//处理向左侧添加一个选项的事件
$("#left-one").click(function (){
//向左侧添加一个
// 父(要插入的地方) //子,插入的内容
$('#first').append($('#second option:selected'));
});
/********************处理向右插入全部*********************/
$("#left-all").click(function (){
//向左侧添加全部
// 父(要插入的地方) //子,插入的内容
$('#first').append($('#second option'));
});
//处理双击一个到右侧
$("#first").dblclick(function (){
$('#second').append($('#first option:selected'));
});
//处理双击一个到左侧
$("#second").dblclick(function (){
$('#first').append($('#second option:selected'));
});
});
</script>
</head>
<body>
<table width="300" border="1">
<tr>
<td>
<select id="first" size="10" style="width:120px;" multiple="multiple">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
<option>选项6</option>
<option>选项7</option>
<option>选项8</option>
</select>
</td>
<td>
<input type="button" id="right-one" value="->" /><br>
<input type="button" id="right-all" value=">>" /><br>
<input type="button" id="left-one" value="<-" /><br>
<input type="button" id="left-all" value="<<" /><br>
</td>
<td>
<select id="second" size="10" style="width:120px;" multiple="multiple">
<option>右选项1</option>
<option>右选项2</option>
</select>
</td>
</tr>
</table>
</body>
</html>
相关文章推荐
- jquery子元素选择器、form属性选择器和实现可以左右选择的下拉菜单效果
- JavaScript 的 DOM 实现左右选择的下拉菜单效果
- query实现图片上下左右翻滚效果代码
- Android 利用ViewPager实现图片可以左右循环滑动效果附代码下载
- 一个可以实现 左右联动JTable 的完全Dialog 实现类似 Excel的冻结第一列 效果
- 实现左右移动的下拉菜单效果
- 用jquery实现可以左右选择的菜单效果
- JavaScript 的 DOM 实现左右选择的下拉菜单效果
- ViewGroup实现可以上下、左右滚动跑马灯效果
- 只用html就可以实现图像的左右滚动效果
- 用javascript实现以个动画效果(可以上下左右的移动)
- Android中TextView不获取焦点可以实现跑马灯的效果
- Android 实现多页界面左右滑动切换效果之入门+进阶 (ViewPager+PagerAdapter)
- android 实现在文本内容超过固定宽度可手动左右滚动查看效果
- Android实现渐显按钮的左右滑动效果
- Android实现左右滑动指引效果
- 基于jQuery实现二级下拉菜单效果
- 基于jquery实现左右按钮点击的图片切换效果
- Android 使用NineOldAndroids实现绚丽的ListView左右滑动删除Item效果
- Android实现左右滑动指引效果