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="/UploadFiles/2021-04-02/%E4%B8%8B%E4%B8%80%E9%A1%B5.jpg"><img alt="" name="btnRDrop" id="btnRDrop1" src="/Content/images/%E5%89%8D%E4%B8%80%E9%A1%B5.jpg"></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;
}
复制代码 代码如下:
<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="/UploadFiles/2021-04-02/%E4%B8%8B%E4%B8%80%E9%A1%B5.jpg"><img alt="" name="btnRDrop" id="btnRDrop1" src="/Content/images/%E5%89%8D%E4%B8%80%E9%A1%B5.jpg"></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;
}
标签:
ListBox,互相调整
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“基于JQUERY的两个ListBox子项互相调整的实现代码”评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。