Jquery中文網 www.4271936.live
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 基于JQUERY的兩個ListBox子項互相調整的實現代碼

基于JQUERY的兩個ListBox子項互相調整的實現代碼

發布時間:2013-07-04   編輯:www.4271936.live
基于JQUERY的兩個ListBox子項互相調整的實現代碼,需要的朋友可以參考下。
基于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;
}

您可能感興趣的文章:
基于JQUERY的兩個ListBox子項互相調整的實現代碼
ASP.NET2.0泛型和匿名方法介紹
jquery移動listbox的值原理及代碼
基于jQuery架構javascript基礎體系
jquery控制listbox中項的移動并排序的實現代碼
ASP.NET jQuery 實例17 通過使用jQuery validation插件校驗ListBox
jquery實現漂浮在網頁右側的qq在線客服插件示例
JQuery FlexiGrid的asp.net完美解決方案 dotNetFlexGrid-.Net原生的異步表格控件
JQuery Dialog(JS 模態窗口,可拖拽的DIV)
jQuery 1.5最新版本的改進細節分析

[關閉]
微信下载APP完成任务如何赚钱 非公开发行股票是利好吗 好运快3计划平台 网络投资理财平台哪个好 上海快三开奖数据 江西11选5奖励规则 河北快三走势图和值走势图 重庆时时彩龙虎2期计划 山西体彩十选五开奖结果 今日快三开奖号码 国内十大期货配资公司