SELECT对象的怪事，当一个SELECT的OPTION被复制时，其select会自动发生变化？

首先代码本身存在错误
不是obj.childNodes.length,应该是obj.options.length然后用
obj.appendChild(option)的话，会把原来的select的option 直接 pop out
这样你执行下来应该第一个select剩余 2，4，6这3个选项
新建立的是1,3,5这个
此时由于采用pop out的方法构建所以保留了原来的 selected属性。默认选择 3 这个
而原来的由于1 out了，默认变成2如果采用clone的方法，就直接clone了option，没有其他的附加属性修改后的代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Select </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD><BODY>
<select id="t">
<option value="1">111111</option>
<option value="2">222222</option>
<option value="3" selected>3333333</option>
<option value="4">444444444</option>
<option value="5">55555555</option>
<option value="6">66666666666</option>
</select>
<div id=testsel></div>
<script language="javascript">
var obj = document.getElementById( 't' );
var obj2 = document.createElement( 'SELECT' );
obj2.id="tata"for( var i = 0; i < obj.childNodes.length; i++ ){
var option = obj.options[i];
alert( "option:" + option.selected + "|" + option.outerHTML );
// 采用该办法，最终的select会的选中项会自动变成第一个
obj2.appendChild( option.cloneNode( true ) );
// 如果直接添加，则当遇到一个option为selected后，其后面的option的selected都为true
// obj2.appendChild(option);
// i--;
}
document.getElementById("testsel").appendChild(obj2)
alert( "obj2:" + obj2.outerHTML );
</script>
</BODY>
</HTML>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

抱歉，测试的时候，把代码给搞混了，但对解释该问题不会造成实质的影响。
谢谢slayerbb，但这不是我想要的东西，我希望的搞明白怎么回事，怎么解决这个问题。最后测试的代码应该是：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Select </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD><BODY>
<select id="t">
<option value="1">111111</option>
<option value="2">222222</option>
<option value="3" selected>3333333</option>
<option value="4">444444444</option>
<option value="5">55555555</option>
<option value="6">66666666666</option>
</select>
<script language="javascript">
var obj = document.getElementById( 't' );
var obj2 = document.createElement( 'SELECT' );
for( var i = 0; i < obj.options.length; i++ ){
var option = obj.options[ i ];
alert( "option:" + option.selected + "|" + option.outerHTML );
// 采用该办法，最终的select会的选中项会自动变成第一个
obj2.appendChild( option.cloneNode( true ) ); // 如果直接添加，则当遇到一个option为selected后，其后面的option的selected都为true
// obj2.appendChild( option );
// i--;
}
alert( "obj2:" + obj2.outerHTML );
</script>
</BODY>
</HTML>
然后用
obj.appendChild(option)的话，会把原来的select的option 直接 pop out
这样你执行下来应该第一个select剩余 2，4，6这3个选项
新建立的是1,3,5这个
此时由于采用pop out的方法构建所以保留了原来的 selected属性。默认选择 3 这个
而原来的由于1 out了，默认变成2如果采用clone的方法，就直接clone了option，没有其他的附加属性
>>
obj.appendChild(option)的话，会把原来的select的option 直接 pop out
这样你执行下来应该第一个select剩余 2，4，6这3个选项
新建立的是1,3,5这个1、在appendChild后，同时i--了的，这样就按顺序地把1、2、3、4、5、6都从原obj中pop out，在新的obj2中建立了6个选项，但问题是：
按常规理解，这样应该保留原来的selected属性，但实际情况，是当appendChild到第3个的时候，也就是当遇到selected的选项的时候，下面的所有选项（4、5、6）的selected被被赋予了true，这是为什么？2、采用clone的方法，复制原obj中的每一个option，将其appendChild到新的obj2中，对原obj没影响，新的obj2中的各个option也应该都保留原来的selected属性，但：
为什么实际情况会被变成第一个option的selected属性为true？
1：因为select和option已经应用在网页上，appendChild一个option，相当于转移一个，
当第三个转移到obj2的时候，obj1中selected的是第四个，所以下个循环alert第四个就selected了
所以最后第六个selected，覆盖前面所有的selected2：没有哪个权威说过cloneNode保留option的selected属性，checked好像也不保留，有些浏览器连用innerHTML都不保留
obj2.appendChild( option );
i--;肯定有问题!因为option被pop out了,selected自然跟着下移如果是单选,解决方法如下:
<script language="javascript">
var obj = document.getElementById( 't' );
var obj2 = document.createElement( 'SELECT' );
for( var i = 0; i < obj.options.length; i++ ){
var optionTT ;
optionTT = new Option(obj.options[ i ].text,obj.options[ i ].value,false); obj2.add( optionTT );

if(obj.options[i].selected )
obj2.options[i].selected = true;
else
obj2.options[i].selected = false;
}document.write(obj2.outerHTML );
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
    ul      {margin:0;padding:0}
    li {list-style:none;
            font-size:12px;
            padding-left:4px;
            padding-right:0px;
            margin:0px;
            width:118px;

            event:expression(
                onmouseover=function(){
                style.color="#FFFFFF";
                style.background="#000080";
                },
                onmouseout=function(){
                style.color="#000000";
                style.background="#FFFFFF";
                },
                onclick=function(){
                style.color="#D87DAF";
                style.background="#ABD909";
                }
            );
            }
    </style>
</head>
<body>
右键可以添加，回车结束
<div style="position:absolute;top:100px;left:200px; z-index: 100;">
    <div id="tempDiv"  style="clip: rect(3 280 21 104); position:absolute;"></div>
    <div id="inputDiv" style="z-index:30;position:absolute;left:0px;top:0;display:block;"><input id="addItem" type="text" size="16" onblur="setInputValue();"  onkeypress="checkEnter();"/></div>
    <div id="selectDiv" style="z-index:25;position:absolute;left:0px;top:1px;display:block;">
        <select id="dropSeelct" style="width:125px;" onmousedown="inputValue();">
            <option value="0">可以啦</option>
            <option value="1">第一个</option>
            <option value="2">第二个</option>
            <option value="3">第三个</option>
            <option value="4">第四个</option>
            <option value="5">第五个</option>
        </select>
    </div>
    <div id="simulateSelect" style="text-align:left;width:122px;z-index:28;overflow:auto;position:absolute;left:0px;top:19px;display:none;border:#000000 solid 1px;">

    </div>
</div><script type="text/javascript">function inputValue(){
    if   (event.button==2){           var selectDiv = document.getElementById("selectDiv");
        var tempDiv = document.getElementById("tempDiv");

        selectDiv.style.display="none";
        var addItem = document.getElementById("addItem");
        addItem.value="";
        addItem.focus();
        showSimulateSelect();
    }
}function setInputValue(){

var addItem = document.getElementById("addItem");
var selectDiv = document.getElementById("selectDiv");
   if(addItem.value!=""){
     var dropSeelct = document.getElementById("dropSeelct");

    var op = document.createElement("option");
    dropSeelct.options.add(op);
    op.value = addItem.value;
    op.innerText = addItem.value;


    }
    selectDiv.style.display="block";
    addItem.value="";
    clearSimulateSelect();

}
function checkEnter(){
if(event !=null && event.keyCode == 13){
setInputValue();
}
}
function showSimulateSelect(){

    var dropSeelct = document.getElementById("dropSeelct");


    var op = dropSeelct.options;
    if(op.length>0){
        var div = document.getElementById("simulateSelect");
        var ul=document.createElement("ul");

        for(i=0;i<op.length;i++){

            var li = document.createElement("li");
            li.innerText = op[i].innerText;
            ul.appendChild(li);

        }
        div.appendChild(ul);
        div.style.display="block";
        /*if(op.length>11){
            div.style.width="120px";
            div.style.height="150px";
        }*/
    }
}
function clearSimulateSelect(){

    var simulateSelect  = document.getElementById("simulateSelect");

    while(simulateSelect.childNodes.length>0)
{
simulateSelect.removeChild(simulateSelect.childNodes[0]);
}
simulateSelect.style.display="none";

}
</script>
</body>
</html>