高难问题，特别邀请emu,ruming,骆驼，等高手来看看这个问题！关于select 和 innerHTML

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 3</title><script>
function add(){
  var tt=new Option("11")
  var tt1=new Option("22");  //此处tt为引用类型变量，是一个对象
  f1.sel1.add(tt);
  f1.sel2.add(tt1);


   }
</script>
</head><body>
<form name="f1">
<select name="sel1"></select><select name="sel2"></select>
<p>
<input type="button" name="btn" onClick="add()" value="添加列表">
</p>
</form>
</body></html>

解决方案 »

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

第一个问题
var str="<option value='111'>"+"aaa"+"</option><option value='222'>'bbb'</option>";
呵呵，点名啦。
先看第一个问题，select一般通过outerHTML来改变比较安全：
<select id="sel"></select><button id="btn">添加列表</button>
<script>
btn.onclick=function(){
str=sel.outerHTML.replace(/^(<.*?>).*/,"$1")+"<option value='111'>'aaa'</option><option value='222'>'bbb'</option>"+sel.outerHTML.replace(/.*(<.*?>)$/,"$1");
sel.outerHTML=str;
alert(sel.innerHTML)
}
</script>此外要注意，<button>的结束标记是</button>
问题二，对select和option的克隆操作从来就没安全过，请不要用克隆方法，如果非要的话自己用安全的方式定义一个：
<select id='sel1'></select><select id='sel2'></select>
<button id="btn">添加列表</button>
<script>
function cloneOption(op){
return new Option(op.text,op.value)
}
function btn.onclick(){
var tt=new Option('11','aa');
    sel1.add(tt);
    sel2.add(cloneOption(tt));
}
</script>
问题3，根据文档，HTML,TABLE,TBODY,TFOOT,THEAD和TR对象上innerHTML属性是只读的。
第二个不行的原因cloneNode返回的对象不是Option对象，应该是一个HTML NODE对象。cloneNode方法应该是继承来的一个方法，如果要实现的话还要自己为Option添加方法，如emu所写一样。
try:
1.
<select id="sel"></select><button id="btn">添加列表</button>
<script>
btn.onclick=function(){
str="<option value='111'>aaa</option><option value='222'>bbb</option>";
sel.outerHTML=sel.outerHTML.replace('</SELECT>',str+"</select>")
}
</script>2.
<script>
function btn.onclick(){
var tt=new Option("11","aa")
a=tt.cloneNode()
a.text='11'
a.value='aa'
sel2.options.add(a)
sel1.options.add(tt);
}
</script>
runmin(两个星星得来不易啊)：
-------------------------------------------------------------------------
cloneNode方法应该是继承来的一个方法，如果要实现的话还要自己为Option添加方法
-------------------------------------------------------------------------其实option对象的cloneNode方法是被实现了的。不过如你所说，克隆出来的结果不是一个真正的option对象，而是一个“HTML Node”对象，所以不能用add方法插入文档中，而必须通过appendChild方法。此外文档中指出，cloneNode方法在文档层次中复制一个对象的引用，也就是说，在Option对象被插入文档中并且页面被重新计算前，不能克隆它：<select id='sel1'></select><select id='sel2'></select>
<button id="btn">test</button>
<script>
function btn.onclick(){
var tt=new Option('11','aa');
    sel1.add(tt);
    sel2.appendChild(tt.cloneNode(true));
}
</script>（注意，sel1.add(tt);这一句不先运行，在克隆的时候会死浏览器。）但是试验表明节点操作在select和option对象中的实现显然不安全，所以我宁可自己定义更安全的方法，而不是因为IE没有实现option的克隆。
用appendChild确实可以。但我想既然 tt的克隆体和tt一样，应该可以和 tt一样使用。为什么用 sel2.options[sel2.length]=tt.cloneNode(true); 依然不行？一个“HTML Node”对象和 new 的对象有什么不同？我之所以要和么用，是因为我定义 new Option 时使用了一些 expando属性，
var tt=new Option('11','aa');
    tt.serno='110';
    tt.sertype='100';
......所以使用克隆方便一些。非常感谢大家的支持！
Option是个怪胎，既不是JavaScript对象，也不是DOM对象对JavaScript对象科隆，除了"for ... in ..." loop，还可以这样
function cloneObject(object)
{
function clsTemp(){}
clsTemp.prototype = object;
return new clsTemp()
}对DOM对象
document.createElement
和
document.cloneNode将比较可靠
emu, runmin,wsj 确实是高人，你们说的话我总在慢慢捉摸，直到今天才完全看懂，明白不少，谢谢！