简单jQuery实现选项框中列表项的选择

这段代码非常的简单,仅仅作为自己的一个小小的记录!

ok,先上一个简单的图例,效果如下(注意:这只是一个简单的例子,不过可以根据这个简单的例子,变化出更为复杂的效果)!

代码也非常的简单,如下所示(注意:图片的路径是在我的小例子中的,表的样式也有待自己的调整,还有许多的样式文件和jQuery的JS文件没有包含在代码中,此代码主要是一个记录一个样例!):

<!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>
        <title>例子</title>
            
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="Cache-Control" content="no-store"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Expires" content="0"/>
    

        <style type="text/css">
        .selcet1 {
            border:#CCC solid 1px;
            padding:3px;
            margin:0px;
            font:14px;
            width:250;
            min-width: 83px;
        }
        </style>        
        <script  language="JavaScript" type="text/javascript">
        $(document).ready(function(){
               //点击添加按钮
               $(#add).click(function() {
                   $(#leftIdList option:selected).remove().appendTo(#rightIdList);
               });

               //点击删除按钮
               $(#delete).click(function() {
                   $(#rightIdList option:selected).appendTo(#leftIdList);
               });

               //双击事件
               $(#leftIdList).dblclick(function() {
                   //we will delete the options of the leftIdList when the rightIdList include the same options
                        var rightIdListLength = $(#rightIdList option).length;
                         $(#leftIdList option:selected).each(function(){
                             for(var i=0;i<rightIdListLength;i++)  {
                                 if($("#rightIdList option[index="+i+"]").val()==$(this).val()){
                                     $(this).remove();
                                 }
                               }
                         });
                         
                   $(#leftIdList option:selected).appendTo(#rightIdList);
               });

               $(#rightIdList).dblclick(function() {
                   //we will delete the options of the rightIdList when the leftIdList include the same options
                   var leftIdListLength = $(#leftIdList option).length;
                    $(#rightIdList option:selected).each(function(){
                        for(var i=0;i<leftIdListLength;i++)  {
                            if($("#leftIdList option[index="+i+"]").val()==$(this).val()){
                                $(this).remove();
                            }
                          }
                    });

                   $(#rightIdList option:selected).appendTo(#leftIdList);
               });
           }); 

        function getIdList() {
                    var optionstring = "";
                    optionstring += "<option value=\"001\" >001</option>"+
                                              "<option value=\"002\" >002</option>"+
                                              "<option value=\"003\" >003</option>"+
                                              "<option value=\"004\" >004</option>"+
                                              "<option value=\"005\" >005</option>"+
                                              "<option value=\"006\" >006</option>"+
                                              "<option value=\"007\" >007</option>"+
                                              "<option value=\"008\" >008</option>"+
                                              "<option value=\"009\" >009</option>"+
                                              "<option value=\"010\" >010</option>";
                                              
                    $("#leftIdList").html(optionstring);
         }
        //调用Ajax功能,这个方法是待用的,在实际的项目中使用
        function getIdList_() {
                $.ajax({
                    type : "post",
                    url : "/acode/getIdList.action",
                    data:{id:function(){return $("#id").val();}},
                    dataType : "json",
                    error:function(){
                        alert("没有对应的数据,请查看输入的查询条件!");
                    },
                    success : function(data) {
                        if (data.length == 0) {return;}
                        var optionstring = "";
                        for ( var i = 0; i < data.length; i++) {
                            optionstring += "<option value=\""+ data[i].id +"\" >"+ data[i].id+"</option>";
                        }
                        $("#leftIdList").html(optionstring);
                    }
                });
             }
        </script>
    </head>
    <body>
              <table>
                   <tr>
                        <td align="left">待选学号</td>
                        <td width="81"></td>
                        <td class="notNull" align="left">已选学号</td>
                   </tr>
                   <tr>
                        <td width="83"  align="left"><input id="id" class="input-w-95-1" type="text" onkeyup="getIdList()"/></td>
                        <td width="81"></td>
                        <td></td>
                   </tr>
                   <tr>
                        <td width="83" ><select name="ids_" multiple="multiple" class="selcet1" id="leftIdList" style="width:200;height:100px;"></select></td>
                        <td width="81">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
                              <tr>
                                <td><img onmouseover ="this.src=‘/acode/images/button/d-tj-2.gif‘" onmouseout="this.src=‘/acode/images/button/d-dt.gif‘" src="/acode/images/button/d-dt.gif" width="81" height="25" id="add"/></td>
                              </tr>
                              <tr>
                                <td><img onmouseover ="this.src=‘/acode/images/button/d-sc-2.gif‘" onmouseout="this.src=‘/acode/images/button/d-sc.gif‘" src="/acode/images/button/d-sc.gif" width="81" height="25" id="delete"/></td>
                              </tr>
                           </table>
                        </td>
                        <td><select name="ids" multiple="multiple" class="selcet1" id="rightIdList" style="width:200;height:100px;"></select></td>
                  </tr>
              </table>
    </body>
</html>

简单jQuery实现选项框中列表项的选择,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。