基于JQUERY的两个ListBox子项互相调整的实现代码

HTML: 复制代码代码如下: <div id="divObj3" class="divContent"> <input id="hidColorSelect" name="ColorSelect" type="hidden" value="3,5,6,11,12,13,14" /> <table style="width: 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('colorSelect','colorUnSelect','hidColorSelect',true,this.selectedIndex)" size="8" style="height: 200px; width: 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-width: 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-width: 0px;cursor:hand;" onclick="listMove('colorSelect','colorUnSelect','hidColorSelect',false)" /> </td> <td align="left"> <select id="colorSelect" multiple="multiple" name="selectColors" ondblclick="listMove('colorSelect','colorUnSelect','hidColorSelect',false,this.selectedIndex)" size="8" style="height: 200px; width: 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; }

　　推荐阅读

　　JS 进度条效果实现代码整理

第一种方法:Loading.js 复制代码代码如下: //频率 var frequency = 50; //步长 var step = 3; //背景颜色 var loadingBgcolor = "#ffffff"; //宽度 var loadingWidth = 354; /* *参数说明: *content：显示内容，可>>>详细阅读

本文标题：基于JQUERY的两个ListBox子项互相调整的实现代码

地址：http://www.17bianji.com/kaifa2/JS/24585.html

1/2 1