本文介绍了一个使用jQuery实现的表单功能，该功能允许用户通过点击按钮将选项从一个选择框移动到另一个选择框，实现了选项的添加和删除操作。
<!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=gbk" />
<title>表单之列表添加删除</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#add').click(function(){
$('#s1 option:selected').appendTo("#s2");
});
$('#remove').click(function(){
$('#s2 option:selected').appendTo("#s1");
});
});
</script>
<style type="text/css">
#DS span{
border:1px solid #000;
width:100px;
display:inline-block;
font-size:14px;
}
#DS select{
width:100px;height:100px;
}
</style>
</head>
<body>
<div id="DS">
<div>
<span>
<select id="s1" multiple="true">
<option>诺基亚</option>
<option>三星</option>
<option>摩托罗拉</option>
<option>飞利浦</option>
</select>
</span>
<input id="remove" type="button" value="<<-删除"/> <input id="add" type="button" value="添加->>"/>
<span>
<select id="s2" multiple="true">
</select>
</span>
</div>
<div>
</div>
</div>
</body>
</html>
主要是用到了两点：option:selected')和appendTo
扫一扫
5956
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
