高难问题，特别邀请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


现在关键是第二个问题，不知道怎么解决
...全文
79 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所写一样。
Excel实现GPT：：上下文越大，预测越准 -「上下文窗口」Excel 演示
「LLM那些事」系列第 4 篇《上下文窗口的边界》，文章连接：https://blog.csdn.net/houwenjin/article/details/163999753。 演示什么：在「预测」Sheet 的黄色格子里输入一句话（默认「来泡一杯」），四个「模型」——分别只统计最后 1 / 2 / 3 / 4 个字的 n-gram 查表——同时预测下一个字。同一个输入，看的上下文越长，候选越少、预测越确定： ┌────────────────┬──────────┬───────────────┬──────┐ │ 只看最后几个字 │ 用的前缀 │ 候选下一字数 │ 预测 │ ├────────────────┼──────────┼───────────────┼──────┤ │ 1 个 │ 杯 │ 3（茶/子/水） │ 模糊 │ ├────────────────┼──────────┼───────────────┼──────┤ │ 2 个 │ 一杯 │ 2（茶/水） │ 收窄 │ ├────────────────┼──────────┼───────────────┼──────┤ │ 3 个 │ 泡一杯 │ 1（茶） │ 确定 │ ├────────────────┼──────────┼───────────────┼──────┤ │ 4 个 │ 来泡一杯 │ 1（茶） │ 确定 │ └────────────────┴──────────┴───────────────┴──────┘
运动场馆预约小程序源码-下载即用.zip
代码下载链接： https://pan.quark.cn/s/9b9011ebc861 一款主要用于城市运动预约的工具类程序——运动场馆预约小程序，其核心服务面向20至45岁的运动爱好者群体。该程序提供前后端完整的代码实现，内容涵盖场馆最新动态、运动相关知识普及以及多种场地与设施预约功能，具体包括羽毛球场地、足球场地、篮球场地、健身房、乒乓球场地、游泳场地和网球场地的预约服务。使用者可根据自身运营状况，对提供的场馆类型进行选择性采纳或增添新的场地种类。此程序设计兼具通用性与灵活性，既可满足大型综合性文体中心的需求，也能够适配于羽毛球馆、健身房、乒乓球馆等单一类型的运动场馆。基于腾讯平台提供的技术支持，运动场馆预约小程序能够有效提升城市运动资源的预约与管理效率。
Python DenseNet121 CIFAR-10 十类图像分类
Python DenseNet121 CIFAR-10 十类图像分类 在 CIFAR-10 上训练 DenseNet121 分类模型，输出混淆矩阵、history.csv 与损失曲线，数据自动下载。 功能： · CIFAR-10 十类 · DenseNet121 密集连接 · 混淆矩阵 · 损失曲线 · 自动下载数据 · 打包时预跑 output/preview 压缩包含可运行源码、依赖与说明，按 README 安装后即可复现。
LED灯锁螺丝包装线.rar
LED灯锁螺丝包装线.rar
西南科技大学数电实验Multisim仿真合集
数电实验仿真合集，欢迎补充
JavaScript

87,987

社区成员

224,683

社区内容

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

加载中

查看更多榜单
社区公告
暂无公告

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

+ 用AI写文章