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>

 

效果图