可以左右移动多选下拉列表的javaScipt(可以兼容IE和firefox)
2010-06-28 00:00:00 来源：WEB开发网自己在项目业余时间总结了一份可以左右移动（Add和remove）多选下拉列表的javaScipt,可以兼容IE和firefox,并且经过测试，只是代码略显臃肿，希望各位网友参考后给一些指点，特别是在简化代码方面。
我在让其兼容 firefox很是费了一番心血，所以希望也能对大家有帮助。
注：其实我的javaScript后台和AJAX集成， 和key的多选下拉列表在项目中隐藏掉就好了。javaScipt左右移动和resource相关的下拉列表，不需要全表单提交，就可以改变右边两个多选下拉列表的值，然后提交到后台。
<html>
<script language="javascript">
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>
<select id="$Select" multiple="multiple" size="12">
<option value="0">server 1</option>
<option value="1">server 2</option>
</select>
</div>
<div>
<td>
<a href="#" id="Add"><span>Add</span> ></a><br />
<a href="#" id="Move">< <span>Remove</span></a>
</td>
</div>
</td>
<td>
<div>
<select id="$Select$0" multiple="multiple" size="12">
<option value="0">server 3</option>
<option value="1">server 4</option>
</select>
</div>
<td>
<tr>
<tr>
<td>
Key
<div>
<select id="$Select$1" multiple="multiple" size="12">
<option value="0">server 1 key</option>
<option value="1">server 2 key</option>
</select>
</div>
</td>
<td>
</td>
<td>
<div>
<select id="$Select$0$0" multiple="multiple" size="12">
<option value="0">server 3 key</option>
<option value="1">server 4 key</option>
</select>
</div>
</td>
</tr>
</table>
</form>
</html>
中查找“可以左右移动多选下拉列表的javaScipt(可以兼容IE和firefox)”更多相关内容
中查找“可以左右移动多选下拉列表的javaScipt(可以兼容IE和firefox)”更多相关内容更多精彩
赞助商链接
