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

zhjzh_zjz 2003-06-02 10:16:45

大家来看看这个实验：

问题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.innerHTML=str;//下拉框没反应
alert(sel.innerHTML);//更奇怪的在这里，结果不等于str,少了前面一点东西
}

</script>
//这是IE的一个bug，已经找到，请看：http://support.microsoft.com/default.aspx?sd=msdn&scid=kb;en-us;276228

问题2：

试验下面代码：
<select id='sel1'></select><select id='sel2'></select>
<button id="btn">添加列表</button>
<script>
function btn.onclick(){
var tt=new Option('11','aa'); //此处tt为引用类型变量，是一个对象
sel1.add(tt);
sel2.add(tt);//此处会出错
</script>

对错误的原因分析：此处tt是对象，为引用类型变量，所以不能这样使用，但我把程序改为：
function btn.onclick(){
var tt=new Option('11','aa');
sel1.add(tt);//<==>sel1.options[sel1.length]=tt;
sel2.add(tt.cloneNode(true));

/*还会出错，why?为什么将引用类型拷贝了一个还是不行？？那该怎么办？如果我想同时在两个列表框中添加项，不能用

sel2.add(new Option('aa','11'));这种形式，该怎么办？谁有办法让一个对象同时加到两个列表里面？？？
</script>

问题三：innerHTML对象写元素是只读的？table,tbody,tr,是的，如果写就会出错，我试过？select 对innerHTML好像不是只读的，但会出错！各位给点好的建议！http://support.microsoft.com/default.aspx?sd=msdn&scid=kb;en-us;239832

现在关键是第二个问题，不知道怎么解决

...全文

77 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

mybilly2016 2003-07-18

打赏
举报

mark

zhjzh_zjz 2003-07-06

打赏
举报

emu, runmin,wsj 确实是高人，你们说的话我总在慢慢捉摸，直到今天才完全看懂，明白不少，谢谢！

emu 2003-06-02

打赏
举报

问题3，根据文档，HTML,TABLE,TBODY,TFOOT,THEAD和TR对象上innerHTML属性是只读的。

emu 2003-06-02

打赏
举报

问题二，对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>

emu 2003-06-02

打赏
举报

呵呵，点名啦。
先看第一个问题，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>

zhaoweiwei 2003-06-02

打赏
举报

第一个问题
var str="<option value='111'>"+"aaa"+"</option><option value='222'>'bbb'</option>";

zhaoweiwei 2003-06-02

打赏
举报

<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>

wsj 2003-06-02

打赏
举报

Option是个怪胎，既不是JavaScript对象，也不是DOM对象

对JavaScript对象科隆，除了"for ... in ..." loop，还可以这样
function cloneObject(object)
{
function clsTemp(){}
clsTemp.prototype = object;
return new clsTemp()
}

对DOM对象
document.createElement
和
document.cloneNode将比较可靠

zhjzh_zjz 2003-06-02

打赏
举报

用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';
......

所以使用克隆方便一些。非常感谢大家的支持！

emu 2003-06-02

打赏
举报

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的克隆。

fason 2003-06-02

打赏
举报

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>

blues-star 2003-06-02