一个例子教会你jquery追加标签 append和appendTo
2013-03-28 19:14
309 查看
<!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="../script/jquery-1.4.2.min.js"></script>
<script>
$(function(){
$("input#right").click(function(){//alert("sss");
var $content=$("#select1 option:selected");
$($content).appendTo("#select2");
})
$("input#left").click(function(){//alert("sss");
var $content=$("#select2 option:selected");
$($content).appendTo("#select1");
})
$("input#Allleft").click(function(){
$("#select1 option").appendTo("#select2");
});
$("input#Allright").click(function(){
$("#select2 option").appendTo("#select1");
});
})
</script>
</head>
<body>
<center>
<div style="background-color:#F90; width:400px;">
<select id="select1" multiple="multiple" style="height:150px;">
<option disabled="disabled">水果</option>
<option id="option">苹果</option>
<option id="option">香蕉</option>
<option id="option">白菜</option>
<option id="option">萝卜</option>
</select>
<input type="button" id="right" value="移右" /><input type="button" id="Allright" value="全部移右" /><input type="button" id="left" value="移左" /><input type="button" id="Allleft" value="全部移左" />
<select id="select2" multiple="multiple" style="height:150px;">
<option disabled="disabled">蔬菜</option>
<option>荔枝</option>
<option>葡萄</option>
<option>青菜</option>
<option>茄子</option>
</select>
</div>
</center>
</body>
</html>
<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="../script/jquery-1.4.2.min.js"></script>
<script>
$(function(){
$("input#right").click(function(){//alert("sss");
var $content=$("#select1 option:selected");
$($content).appendTo("#select2");
})
$("input#left").click(function(){//alert("sss");
var $content=$("#select2 option:selected");
$($content).appendTo("#select1");
})
$("input#Allleft").click(function(){
$("#select1 option").appendTo("#select2");
});
$("input#Allright").click(function(){
$("#select2 option").appendTo("#select1");
});
})
</script>
</head>
<body>
<center>
<div style="background-color:#F90; width:400px;">
<select id="select1" multiple="multiple" style="height:150px;">
<option disabled="disabled">水果</option>
<option id="option">苹果</option>
<option id="option">香蕉</option>
<option id="option">白菜</option>
<option id="option">萝卜</option>
</select>
<input type="button" id="right" value="移右" /><input type="button" id="Allright" value="全部移右" /><input type="button" id="left" value="移左" /><input type="button" id="Allleft" value="全部移左" />
<select id="select2" multiple="multiple" style="height:150px;">
<option disabled="disabled">蔬菜</option>
<option>荔枝</option>
<option>葡萄</option>
<option>青菜</option>
<option>茄子</option>
</select>
</div>
</center>
</body>
</html>
相关文章推荐
- jQuery追加标签 append和appendTo
- append和appendTo的区别以及appendChild用法 (一个是js中,另两个是jquery中)
- jsp Bean 标签 使用 一般规则 一个例子
- [前端] jquery获取append追加的input值
- 一个jstl标签综合运用的例子(包括下拉列表事件处理等等),直观了解一个浏览器页面上有多少对象)
- 自己做的jquery的autocomplete的一个例子
- jquery append() 追加内容 remove() 删除回调
- jquery增加,移除,修改一个html标签的class名字。
- JQuery插件之-----Datatables(一)一个简单的例子
- Flex中通过textAlign样式在一个按钮(Button)控件中设置标签(label)对齐方式的例子
- 锋利的jQuery-2--一个显示和隐藏的例子,主要看写法
- 一个简单的例子教会您使用javap
- 一个javascript滑动标签的例子
- 【阅读】《head first jquery》第五章——jquery效果与动画(一个变脸的小例子)
- 用一个HelloWorl例子手把手教会你使用BlazeDS
- jquery多个标签绑定同一个事件
- jquery中append()与appendto()用法分析
- Flex:在LineChart图表中创建一个自定义的LinearAxis函数标签(Tip提示)的例子
- jquery append() 追加内容 remove() 删除回调
- 使用jQuery+HttpHandler+xml模拟一个三级联动的例子