基于JQUERY的兩個(gè)ListBox子項(xiàng)互相調(diào)整的實(shí)現(xiàn)代碼

更新時(shí)間：2011年05月07日 11:00:26 作者：

基于JQUERY的兩個(gè)ListBox子項(xiàng)互相調(diào)整的實(shí)現(xiàn)代碼，需要的朋友可以參考下。

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(&#39;colorSelect&#39;,&#39;colorUnSelect&#39;,&#39;hidColorSelect&#39;,true,this.selectedIndex)" size="8" style="height: 200px; width: 90%;"><option value="4">藍(lán)色</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(&#39;colorSelect&#39;,&#39;colorUnSelect&#39;,&#39;hidColorSelect&#39;,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> 

對(duì)應(yīng)JS方法:

復(fù)制代碼代碼如下:

 
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，取得選中項(xiàng)的值 
$('#' + main + ' option').each(function () { 
str += $(this).val() + ','; 
}); 
hid.value = str; 
} 