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

复制代码 代码如下:

<div>
<input type="hidden" value="3,5,6,11,12,13,14" />
<table>
<tr>
<td>
<span>未选择颜色</span> ：
</td>
<td>
</td>
<td>
<span>已选择颜色</span> ：
</td>
</tr>
<tr>
<td>
<select multiple="multiple" ondblclick="listMove(&#39;colorSelect&#39;,&#39;colorUnSelect&#39;,&#39;hidColorSelect&#39;,true,this.selectedIndex)" size="8"><option value="4">蓝色</option>
<option value="21">红色132</option>
</select>
</td>
<td>
<img alt="" src="https://www.jb51.net/Content/images/%E4%B8%8B%E4%B8%80%E9%A1%B5.jpg" />
<img alt="" src="https://www.jb51.net/Content/images/%E5%89%8D%E4%B8%80%E9%A1%B5.jpg" />
</td>
<td>
<select multiple="multiple"
ondblclick="listMove(&#39;colorSelect&#39;,&#39;colorUnSelect&#39;,&#39;hidColorSelect&#39;,false,this.selectedIndex)"
size="8">
<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;
}

您可能感兴趣的文章: