zoukankan      html  css  js  c++  java
  • 两个ListBox子项互相调整 JQUERY

    HTML:

    <div id="divObj3" class="divContent">
                    
    <input id="hidColorSelect" name="ColorSelect" type="hidden" value="3,5,6,11,12,13,14" />
                    
    <table style=" 100%; text-align: center;">
                        
    <tr class="tr">
                            
    <td class="tdr" align="center" width="50%">
                                
    <span id="ctl00_ContentPlaceHolder1_WebPanel4_Label7">未选择颜色</span> :
                            
    </td>
                            
    <td class="tdl" width="1%">
                            
    </td>
                            
    <td class="tdr" align="center" width="50%">
                                
    <span id="ctl00_ContentPlaceHolder1_WebPanel4_Label8">已选择颜色</span> :
                            
    </td>
                        
    </tr>
                        
    <tr class="tr">
                            
    <td align="right">
                                
    <select id="colorUnSelect" multiple="multiple" name="unSelectColors" ondblclick="listMove(&#39;colorSelect&#39;,&#39;colorUnSelect&#39;,&#39;hidColorSelect&#39;,true,this.selectedIndex)" size="8" style="height: 200px;  90%;"><option value="4">蓝色</option>
    <option value="21">红色132</option>
    </select>
                            
    </td>
                            
    <td>
                                
    <img alt="" name="btnRAdd" id="btnRAdd1" src="/Content/images/%E4%B8%8B%E4%B8%80%E9%A1%B5.jpg" style="border- 0px;cursor:hand;" onclick="listMove('colorSelect','colorUnSelect','hidColorSelect',true)" />
                                
    <img alt="" name="btnRDrop" id="btnRDrop1" src="/Content/images/%E5%89%8D%E4%B8%80%E9%A1%B5.jpg" style="border- 0px;cursor:hand;" onclick="listMove('colorSelect','colorUnSelect','hidColorSelect',false)" />
                            
    </td>
                            
    <td align="left">
                                
    <select id="colorSelect" multiple="multiple" name="selectColors" 
                                    ondblclick="listMove(&#39;colorSelect&#39;,&#39;colorUnSelect&#39;,&#39;hidColorSelect&#39;,false,this.selectedIndex)" 
                                    size="8" style="height: 200px;  90%;">
                                    <option value="3">红色</option>
                                    <option value="5">紫色</option>
                                    <option value="6">黄色</option>
                                    <option value="11">黑色</option>
                                    <option value="12">白色</option>
                                    <option value="13">绿色</option>
                                    <option value="14">粉红色</option>
                                </select>
                            
    </td>
                        
    </tr>
                    
    </table>
                
    </div>

     对应JS方法:

    function listMove(main, follow, hidetextbox, isBack, index) {
            
    if (index < 0)
                
    return;
            
    var o = undefined;
            
    var source;
            
    var distinct;
            
    var dddd;
            
    if (!isBack) {
                //使用getElementById在IE6中存在BUG
                source 
    = $('#' + main);//  window.document.getElementById(main);
                distinct = $('#' + follow); //window.document.getElementById(follow);
     
     
            }
            
    else {
                source 
    = $('#' + follow); // window.document.getElementById(follow);
                distinct = $('#' + main); // window.document.getElementById(main);
                
            }
            
    var hid = $('#' + hidetextbox)[0]; // document.getElementById(hidetextbox);
            if (index != undefined) {
                
    var op = "option:eq(" + index + ")";
                source.find(op).each(
    function () {
                    distinct.append(
    "<option value='" + $(this).val() + "'>" + $(this).text() + "</option>");
                    $(
    this).remove();
                });
            }
            
    else {
                source.find(
    "option:selected").each(function () {
                    $(
    this).remove();
                    distinct.append(
    "<option value='" + $(this).val() + "'>" + $(this).text() + "</option>");
     
                });             
            }
     
            
    var str = "";
            
    //遍历Listbox,取得选中项的值
            $('#' + main + ' option').each(function () {
                str 
    += $(this).val() + ',';
            });
     
            hid.value 
    = str;
     
        }   
  • 相关阅读:
    <C#>关于string.Empty & "" & null 的讨论
    c# checked unchecked 关键字 try
    sql2005数据库加锁后解锁
    c#对字符串转义符进行解码
    继承本质论
    javascript中parseInt和Number函数的用法区别
    BIRT 使用说明书
    最后一周
    修改字段
    SQLserver中join
  • 原文地址:https://www.cnblogs.com/splyn/p/2038551.html
Copyright © 2011-2022 走看看