两个Select互选的Javascript实现
2006-06-12 00:46 晓风残月 阅读(1085) 评论(0) 编辑 收藏 举报
自己用javascript写了一个两个select互选的,可多选,为了兼容IE和Firefox真是礼金千辛万苦,对Javascript和DOM还不是黑熟,参考了网上一些Demo,致谢!
<html>
<body>
<div>
<select id="oSelect1" name="Cars" size="10" multiple="multiple">
<option value="1">BMW</option>
<option value="2">Porsche</option>
<option value="3" >Mercedes</option>
</select>
<input type="button" onclick="choose('oSelect1', 'oSelect2')" value=">>" />
<br />
<input type="button" onclick="choose('oSelect2', 'oSelect1')" value="<<" />
<select id="oSelect2" name="Cars" size="10" multiple="multiple">
</select>
</div>
</body>
</html>
<script language="javascript" type="text/javascript">
function choose(src, dst) {
var oSelect1 = document.getElementById(src);
var oSelect2 = document.getElementById(dst);
var opts = new Array();
var i;
for(i = 0; i < oSelect1.options.length; i++)
{
var item = oSelect1.options[i];
if(item.selected) {
opts.push(item);
}
}
for(i = 0; i < opts.length; i++)
{
var opt = document.createElement("<option>");
opt.text = opts[i].text;
opt.value = opts[i].value;
if(navigator.appName == 'Microsoft Internet Explorer') {
oSelect2.add(opt);
//oSelect2.add(opt, null); // IE 不支持
//oSelect2.appendChild(opt); // IE 不支持,可以添加,但是不显示,^||^
}
else {
//oSelect2.add(opt); // firefox 不支持
oSelect2.add(opt, null);
//oSelect2.appendChild(opt); // firefox 支持
}
oSelect1.removeChild(opts[i]);
}
}
</script>
<body>
<div>
<select id="oSelect1" name="Cars" size="10" multiple="multiple">
<option value="1">BMW</option>
<option value="2">Porsche</option>
<option value="3" >Mercedes</option>
</select>
<input type="button" onclick="choose('oSelect1', 'oSelect2')" value=">>" />
<br />
<input type="button" onclick="choose('oSelect2', 'oSelect1')" value="<<" />
<select id="oSelect2" name="Cars" size="10" multiple="multiple">
</select>
</div>
</body>
</html>
<script language="javascript" type="text/javascript">
function choose(src, dst) {
var oSelect1 = document.getElementById(src);
var oSelect2 = document.getElementById(dst);
var opts = new Array();
var i;
for(i = 0; i < oSelect1.options.length; i++)
{
var item = oSelect1.options[i];
if(item.selected) {
opts.push(item);
}
}
for(i = 0; i < opts.length; i++)
{
var opt = document.createElement("<option>");
opt.text = opts[i].text;
opt.value = opts[i].value;
if(navigator.appName == 'Microsoft Internet Explorer') {
oSelect2.add(opt);
//oSelect2.add(opt, null); // IE 不支持
//oSelect2.appendChild(opt); // IE 不支持,可以添加,但是不显示,^||^
}
else {
//oSelect2.add(opt); // firefox 不支持
oSelect2.add(opt, null);
//oSelect2.appendChild(opt); // firefox 支持
}
oSelect1.removeChild(opts[i]);
}
}
</script>