高难问题,特别邀请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
  • 打赏
  • 举报
回复
第二个不行的原因cloneNode返回的对象不是Option对象,应该是一个HTML NODE对象。cloneNode方法应该是继承来的一个方法,如果要实现的话还要自己为Option添加方法,如emu所写一样。
内容概要:本文围绕基于电压-电流双闭环控制的断续导通模式(DCM)反激式开关电源展开系统性仿真研究,整合仿真模型、理论文献与Mathcad计算书三大资源,深入阐述该电源系统的设计原理与实现方法。研究重点在于构建电压外环与电流内环的双闭环控制策略,以提升电源的动态响应速度、输出电压稳定性和负载调整率。通过Matlab/Simulink等工具建立精确仿真模型,验证DCM模式下反激变换器的能量传递特性、开关器件应力分布及反馈控制环路的稳定性表现。同时,借助Mathcad完成关键电路参数的数学建模与设计计算,确保理论分析与仿真结果的高度一致性,实现从理论推导到工程实践的闭环验证。; 适合人群:具备电力电子技术基础,从事开关电源设计、电力变换器开发或自动化控制等相关领域研究的研发工程师及高校研究生。; 使用场景及目标:①掌握反激式开关电源在DCM模式下的工作机理与系统建模方法;②学习电压-电流双闭环控制器的设计流程、稳定性分析与参数整定技术;③实现理论计算、数学推导与仿真实践的深度融合,支撑科研项目复现或实际工程原型开发。; 阅读建议:建议读者结合所提供的仿真文件、技术文献与Mathcad计算文档同步学习,注重理论公式推导与仿真波形结果的对照分析,动手调整控制器参数以深入理解系统动态响应特性与稳定性边界。

87,988

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧