可以左右移动多选下拉列表的javaScipt(可以兼容IE和firefox)-白红宇

可以左右移动多选下拉列表的javaScipt(可以兼容IE和firefox)

阅读量：6984 次

发布时间：2019-06-27

本文共 4689 字，大约阅读时间需要 15 分钟。

自己在项目业余时间总结了一份可以左右移动（Add和remove）多选下拉列表的javaScipt,可以兼容IE和firefox,并且经过测试，只是代码略显臃肿，希望各位网友参考后给一些指点，特别是在简化代码方面。

我在让其兼容 firefox很是费了一番心血，所以希望也能对大家有帮助。

注：其实我的javaScript后台和AJAX集成，和key的多选下拉列表在项目中隐藏掉就好了。javaScipt左右移动和resource相关的下拉列表，不需要全表单提交，就可以改变右边两个多选下拉列表的值，然后提交到后台。

<html>

function isIE(){ //ie?

if (window.navigator.userAgent.toLowerCase().indexOf("msie")>=1)

return true;

else

return false;

}

function moveSelected(oSourceSelName,oTargetSelName,oSourceSelNamekey,oTargetSelNameKey)

{

//alert("isIE "+isIE());

var selectResourcesString = "";

var arrSelValue = new Array();

var arrSelText = new Array();

var arrSelOption = new Array();

var oSourceSel = document.getElementById(oSourceSelName);

var oTargetSel = document.getElementById(oTargetSelName);

var arrSelValueKey = new Array();

var arrSelTextKey = new Array();

var arrSelOptionKey = new Array();

var oSourceSelKey = document.getElementById(oSourceSelNamekey);

var oTargetSelKey = document.getElementById(oTargetSelNameKey);

if(!isIE())

{

//alert("if")

var optionContent = oTargetSel.innerHTML;

var optionContentKey = oTargetSelKey.innerHTML;

//alert("optionContentKey "+optionContentKey);

for(var i=0; i<oSourceSel.options.length; i++)

{

if(oSourceSel.options[i].selected)

{

arrSelValue[arrSelValue.length] = oSourceSel.options[i].value;

arrSelText[arrSelText.length] = oSourceSel.options[i].text;

arrSelOption[arrSelOption.length] = oSourceSel.options[i];

arrSelValueKey[arrSelValueKey.length] = oSourceSelKey.options[i].value;

arrSelTextKey[arrSelTextKey.length] = oSourceSelKey.options[i].text;

arrSelOptionKey[arrSelOptionKey.length] = oSourceSelKey.options[i];

}

for(var i=0; i<arrSelValue.length; i++)

{

var name = arrSelText[i];

var value = arrSelValue[i];

var oOption = '<option value=';

oOption += value;

oOption += '>';

oOption += name;

oOption += '</option>';

var oOptionKey = '<option value=';

oOptionKey += arrSelValueKey[i];

oOptionKey += '>';

oOptionKey += arrSelTextKey[i];

oOptionKey += '</option>';

optionContent += oOption;

optionContentKey += oOptionKey;

oSourceSel.removeChild(arrSelOption[i]);

oSourceSelKey.removeChild(arrSelOptionKey[i]);

}

oTargetSel.innerHTML = optionContent;

oTargetSelKey.innerHTML = optionContentKey;

}

else

{

//alert("else");

for(var i=0; i<oSourceSel.options.length; i++)

{

if(oSourceSel.options[i].selected)

{

arrSelValue[arrSelValue.length] = oSourceSel.options[i].value;

arrSelText[arrSelText.length] = oSourceSel.options[i].text;

arrSelOption[arrSelOption.length] = oSourceSel.options[i];

arrSelValueKey[arrSelValueKey.length] = oSourceSelKey.options[i].value;

arrSelTextKey[arrSelTextKey.length] = oSourceSelKey.options[i].text;

arrSelOptionKey[arrSelOptionKey.length] = oSourceSelKey.options[i];

}

//alert("arrSelValue"+arrSelValue);

for(var i=0; i<arrSelValue.length; i++)

{

var name = arrSelText[i];

var value = arrSelValue[i];

var oOption = document.createElement("option");

oOption.text = arrSelText[i];

oOption.value = arrSelValue[i];

var oOptionKey = document.createElement("option");

oOptionKey.text = arrSelTextKey[i];

oOptionKey.value = arrSelValueKey[i];

var k=0;

for(k=0;k<oTargetSel.options.length;k++)

{

if(oTargetSel.options[k].value > arrSelValue[i])

{

break;

}

for(k=0;k<oTargetSelKey.options.length;k++)

{

if(oTargetSelKey.options[k].value > arrSelValueKey[i])

{

break;

}

//alert("oOption "+oOption);

oTargetSel.add(oOption,k);

oTargetSelKey.add(oOptionKey,k);

oSourceSel.removeChild(arrSelOption[i]);

oSourceSelKey.removeChild(arrSelOptionKey[i]);

//alert(oSourceSel.value);

//alert(oSourceSelKey.value);

}

</script>

<form>

<table>

<tr>

<td>

Resource

<div>

<option value="0">server 1</option>

<option value="1">server 2</option>

</select>

</div>

<div>

<td>

<a οnclick="javaScript:moveSelected('$Select$0', '$Select','$Select$0$0','$Select$1')" href="#" id="Move">< <span>Remove</span></a>

</td>

</div>

</td>

<td>

<div>

<option value="0">server 3</option>

<option value="1">server 4</option>

</select>

</div>

<td>

<tr>

<td>

Key

<div>

<option value="0">server 1 key</option>

<option value="1">server 2 key</option>

</select>

</div>

</td>

<td>

</td>

<td>

<div>

<option value="0">server 3 key</option>

<option value="1">server 4 key</option>

</select>

</div>

</td>

</tr>

</table>

</form>

</html>

转载于:https://www.cnblogs.com/kungfupanda/archive/2010/06/28/1766722.html

你可能感兴趣的文章

Debian 项目不再提供 CD 格式的 ISO 镜像

查看>>

《设计团队协作权威指南》—第1章1.3节甘为螺丝钉

查看>>

android 屏幕保持唤醒不锁屏 android.permission.WAKE_LOCK

查看>>

《Unity 3D 游戏开发技术详解与典型案例》——1.3节第一个Unity 3D程序

查看>>

Airbnb数据科学团队进化论：如何由内而外实现数据驱动

查看>>

如何用机器学习预测超售，避免美联航“暴力赶客”悲剧

查看>>

css细节(实习第1天)

查看>>

腾讯Android自动化测试实战3.1.4　Robotium的控件获取、操作及断言

查看>>

《C语言点滴》一1.5 内功修炼

查看>>

浅析 Linux 初始化 init 系统: UpStart

查看>>

《PHP和MySQL Web开发从新手到高手（第5版）》一1.7 万事俱备，摩拳擦掌

2016及以后的自动化测试趋势 -《测试技术六月刊》