CheckBoxList与SELECT 添加删除 ，置顶，上移，下移，置底

<script src="../lib/jquery-1.2.6.pack.js"type="text/javascript"></script>

<script type="text/javascript" language="javascript">
$(document).ready(function(){
$(":checkbox[name = 'CheckBoxList4'] ").click(
function()
{
if (this.checked)
{
// alert($(this).attr("value")+$(this).attr("title"));
if($("input[@name='CheckBoxList4'][@checked]").length > 3)
{
$(this).attr("checked",false);//
alert("最多只能选择3个！");
}
else
{
addOption(document.getElementById("ddl26"),$(this).attr("title"),$(this).attr("value"));
}
}
else
{
removeItem(document.getElementById("ddl26"),$(this).attr("value"));
}
}
)

// $("div.div_question").mouseover(function(){
// $(this).removeClass().addClass("div_question_mouseover");
// }).mouseout(function(){
// $(this).removeClass().addClass("div_question_mouseout");
// });
});

function addOption(obj,stext,svalue)
{
var isExt = false;
for(var i=1; i < obj.length; i++)
　　　　{//最上面的一个不需要移动，所以直接从i=1开始
　　　　　　if(obj.options[i].value == svalue)
　　　　　　{
　　　　　　　 isExt = true;
　　　　　　　 break;
　　　　　　}
　　　　}
　　　　if(!isExt)
　　　　{
　　　　 var opt = new Option(stext,svalue);
obj.options.add(opt);
}
}
function removeItem(obj,value)
{
for(var i=0; i < obj.length; i++)
　　　　{//最上面的一个不需要移动，所以直接从i=1开始
　　　　　　if(obj.options[i].value == value)
　　　　　　{
　　　　　　　 obj.remove(i);
　　　　　　　 break;
　　　　　　}
　　　　}
}
//上移
　 function moveUp(obj)
　　{　
　　　　　　for(var i=1; i < obj.length; i++)
　　　　　　{//最上面的一个不需要移动，所以直接从i=1开始
　　　　　　　　if(obj.options[i].selected)
　　　　　　　　{
　　　　　　　　　　if(!obj.options.item(i-1).selected)
　　　　　　　　　　{
　　　　　　　　　　　　var selText = obj.options[i].text;
　　　　　　　　　　　　var selValue = obj.options[i].value;
obj.options[i].text = obj.options[i-1].text;
obj.options[i].value = obj.options[i-1].value;
obj.options[i].selected = false;
obj.options[i-1].text = selText;
obj.options[i-1].value = selValue;
obj.options[i-1].selected=true;
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}
　　　　}

//下移
function moveDown(obj)
　　　　{
　　　　　　for(var i = obj.length -2 ; i >= 0; i--)
　　　　　　{//向下移动，最后一个不需要处理，所以直接从倒数第二个开始
　　　　　　　　if(obj.options[i].selected)
　　　　　　　　{
　　　　　　　　　　if(!obj.options[i+1].selected)
　　　　　　　　　　{
　　　　　　　　　　　　var selText = obj.options[i].text;
　　　　　　　　　　　　var selValue = obj.options[i].value;
obj.options[i].text = obj.options[i+1].text;
obj.options[i].value = obj.options[i+1].value;
obj.options[i].selected = false;
obj.options[i+1].text = selText;
obj.options[i+1].value = selValue;
obj.options[i+1].selected=true;
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}
　　　　}
//移动
function moveOption(obj1, obj2)
{
for(var i = obj1.options.length - 1 ; i >= 0 ; i--)
{
if(obj1.options[i].selected)
{
var opt = new Option(obj1.options[i].text,obj1.options[i].value);
opt.selected = true;
obj2.options.add(opt);
obj1.remove(i);
}
}
}
//置顶
function moveTop(obj)
{
var opts = [];
for(var i =obj.options.length -1 ; i >= 0; i--)
{
if(obj.options[i].selected)
{
opts.push(obj.options[i]);
obj.remove(i);
}
}
var index = 0 ;
for(var t = opts.length-1 ; t>=0 ; t--)
{
var opt = new Option(opts[t].text,opts[t].value);
opt.selected = true;
obj.options.add(opt, index++);
}
}
//置底
function moveBottom(obj)
{
var opts = [];
for(var i =obj.options.length -1 ; i >= 0; i--)
{
if(obj.options[i].selected)
{
opts.push(obj.options[i]);
obj.remove(i);
}
}
for(var t = opts.length-1 ; t>=0 ; t--)
{
var opt = new Option(opts[t].text,opts[t].value);
opt.selected = true;
obj.options.add(opt);
}
}

<table>
<tr>
<td > <%--<asp:CheckBoxList ID="CheckBoxList4" runat="server" Width="297px" >
<asp:ListItem Value="A">厂家商品描述</asp:ListItem>
<asp:ListItem Value="B">消费者对商品的评论</asp:ListItem>
<asp:ListItem Value="C">面料</asp:ListItem>
<asp:ListItem Value="D">品牌（是您喜欢的服装品牌）</asp:ListItem>
<asp:ListItem Value="E">做工</asp:ListItem>
<asp:ListItem Value="F">价格便宜</asp:ListItem>
<asp:ListItem Value="G">商品的展示方式</asp:ListItem>
<asp:ListItem Value="H">客服人员的推荐和介绍</asp:ListItem>
<asp:ListItem Value="I">有成套搭配可以选择</asp:ListItem>
<asp:ListItem Value="J">款式和颜色</asp:ListItem>
<asp:ListItem Value="K">商品已经销售的数量</asp:ListItem>
</asp:CheckBoxList>--%>
<ul>
<li><input id="Checkbox1" type="checkbox" name="CheckBoxList4" value="A" title="厂家商品描述"/>厂家商品描述</li>
<li><input id="Checkbox2" type="checkbox" name="CheckBoxList4" value="B" title="消费者对商品的评论"/>消费者对商品的评论</li>
<li><input id="Checkbox3" type="checkbox" name="CheckBoxList4" value="C" title="面料"/>面料</li>
<li><input id="Checkbox4" type="checkbox" name="CheckBoxList4" value="D" title="品牌（是您喜欢的服装品牌）"/>品牌（是您喜欢的服装品牌）</li>
<li><input id="Checkbox5" type="checkbox" name="CheckBoxList4" value="E" title="做工"/>做工</li>
<li><input id="Checkbox6" type="checkbox" name="CheckBoxList4" value="F" title="价格便宜"/>价格便宜</li>
<li><input id="Checkbox7" type="checkbox" name="CheckBoxList4" value="G" title="商品的展示方式"/>商品的展示方式</li>
<li><input id="Checkbox8" type="checkbox" name="CheckBoxList4" value="H" title="客服人员的推荐和介绍"/>客服人员的推荐和介绍</li>
<li><input id="Checkbox9" type="checkbox" name="CheckBoxList4" value="I" title="有成套搭配可以选择"/>有成套搭配可以选择</li>
<li><input id="Checkbox10" type="checkbox" name="CheckBoxList4" value="J" title="款式和颜色"/>款式和颜色</li>
<li><input id="Checkbox11" type="checkbox" name="CheckBoxList4" value="K" title="商品已经销售的数量"/>商品已经销售的数量</li>
</ul><br />
</td>
<td valign="top"> <TABLE style="FLOAT: left">
<TBODY>
<TR>
<TD verticalalign="center">
<div style="MARGIN-LEFT: 10px"><select id="ddl26" name="ddl26" style="OVERFLOW: auto; WIDTH: 200px; HEIGHT: 200px" size="15" multiple></select></ddl26></DIV></TD>
<TD verticalalign="center">
<DIV class=qButton>
<UL>
<LI><img src="Resources/images/gotop1.gif" alt="" /> <a onclick="moveTop(document.getElementById('ddl26'));" style="cursor:pointer"
name=first>移至最前</A></LI>
<LI><img src="Resources/images/upmove.gif" alt="" /> <a onclick="moveUp(document.getElementById('ddl26'));" name = "up" style="cursor:pointer">上移一位</a>
</LI>
<LI style="MARGIN-TOP: 10px"><img src="Resources/images/downmove.gif" alt=""/> <a onclick="moveDown(document.getElementById('ddl26'));" style="cursor:pointer">下移一位</a></LI>
<LI><img src="Resources/images/gobottom1.gif" /> <a onclick="moveBottom(document.getElementById('ddl26'));" style="cursor:pointer" name="last">移至最后</a></LI></UL></DIV></TD></TR></TBODY></TABLE></td>
</tr>
</table>

效果图