基于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('colorSelect','colorUnSelect','hidColorSelect',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('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>
對應(yīng)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,取得選中項(xiàng)的值
$('#' + main + ' option').each(function () {
str += $(this).val() + ',';
});
hid.value = str;
}
復(fù)制代碼 代碼如下:
<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">藍(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('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>
對應(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;
}
您可能感興趣的文章:
- JS ListBox的簡單功能實(shí)現(xiàn)代碼
- js 獲取Listbox選擇的值的代碼
- javascript實(shí)現(xiàn)listbox左右移動實(shí)現(xiàn)代碼
- 使用javascript實(shí)現(xiàn)ListBox左右全選,單選,多選,全請
- JavaScript如何從listbox里同時(shí)刪除多個(gè)項(xiàng)目
- 用JavaScript實(shí)現(xiàn)類似于ListBox功能示例代碼
- JavaScript控制兩個(gè)列表框listbox左右交換數(shù)據(jù)的方法
- 輕松使用jQuery雙向select控件Bootstrap Dual Listbox
- jquery控制listbox中項(xiàng)的移動并排序
- jquery控制listbox中項(xiàng)的移動并排序的實(shí)現(xiàn)代碼
- jquery移動listbox的值原理及代碼
- JS與jQuery實(shí)現(xiàn)ListBox上移,下移,左移,右移操作功能示例
相關(guān)文章
輕松學(xué)習(xí)jQuery插件EasyUI EasyUI表單驗(yàn)證
輕松學(xué)習(xí)jQuery插件EasyUI,本文的重點(diǎn)在于EasyUI表單驗(yàn)證,并告訴大家如何提交表單,感興趣的小伙伴們可以參考一下2015-12-12jquery-file-upload 文件上傳帶進(jìn)度條效果
這篇文章主要介紹了jquery-file-upload 文件上傳帶進(jìn)度條效果,代碼分為html部分css部分和js部分,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-11-11jQuery3.0中的buildFragment私有函數(shù)詳解
在 jQuery3.0中,buildFragment 是一個(gè)私有函數(shù),用來構(gòu)建一個(gè)包含子節(jié)點(diǎn) fragment 對象。下文給大家介紹jQuery3.0中的buildFragment私有函數(shù)詳解,對jquery3.0 buildfragment相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-08-08jquery Ajax 全局調(diào)用封裝實(shí)例詳解
這篇文章主要介紹了jquery Ajax 全局調(diào)用封裝實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-01-01基于JQuery的一個(gè)簡單的鼠標(biāo)跟隨提示效果
代碼很簡單主要是用到了JQuery的三個(gè)事件mouseover,mouseout,mousemove.2010-09-09Easyui筆記2:實(shí)現(xiàn)datagrid多行刪除的示例代碼
本篇文章主要介紹了Easyui筆記2:實(shí)現(xiàn)datagrid多行刪除,詳細(xì)介紹了完成一個(gè)多行勾選并刪除的功能。有興趣的可以了解一下。2017-01-01