高手请进：一个关于select innerHTML; 的奇怪现象

one_bird 2003-09-19 09:19:32
<script>
function mchange(mName){
olds = document.all('tid').innerHTML;
alert(olds);

sS="<option value='1'>测试一</option>";
document.all('tid').innerHTML=sS;
}
</script>
<form name="PageForm" method="post" action="<%=thisPageName%>">
<div align="center">
<table width="90%" border="0" cellpadding="2" cellspacing="0">
<tr>
<td width="20%" height="22">模块分类 </td>
<td width="21%">
<select id="mid" name="model" onchange="mchange('aa')">
<option value="q">a</option>
<option value="b">bb</option>
<option value="c">cc</option>
</select>
</td>
<td width="16%">主题</td>
<td width="19%">
<select id="tid" name="topic">
</select>
</td>
<td width="24%"> </td>
</tr>
</table>
</div>
</form>
...全文
101 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
liudong963 2003-09-19
  • 打赏
  • 举报
 回复
还有一种方法就是：
当要insert的option比较多时，速度会很慢，我认为最好办法就是使用构造字符串，再用outerHTML来实现替换原来对象，但会造成对象的瞬间闪烁，可是相对赢得的时间来说，是值得的，看下面测试：

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>

<body>
<select name="tid1">
</select>
<select name="tid2">
</select>
<script language="VBScript">
<!--
Function InitSelect()
Dim max,oOption,oSelect,tt,i,TimeStr
max=1000
tt=timer
set oSelect= document.all("tid1")
for i=1 to max
set oOption = document.createElement("OPTION")
oOption.text="测试"&i
oOption.value=i
oSelect.add(oOption)
next

TimeStr="程序一实现为时间："&(timer-tt)*1000&"ms"&vbcrlf

tt=timer
Dim temp
set oSelect= document.all("tid2")
temp=Replace(oSelect.outerHTML,"</select>","",1,1,1)
for i=1 to max
temp=temp&"<option value="&i&">测试"&i&"</option>"
next
temp=temp&"</select>"
oSelect.outerHTML=temp

TimeStr=TimeStr&"程序二实现为时间："&(timer-tt)*1000&"ms"&vbcrlf

alert TimeStr
End Function
call InitSelect
'-->
</script>
</body>
</html>



liudong963 2003-09-19
  • 打赏
  • 举报
 回复
呵呵，对于innerHTML属性虽然可以应用于Select标签，但是不能在使用innerHTML来实现插入TD、TR、OPTION等对象，要插入这些对象，要实现你的程序，可以使用以下代码：

function mchange(mName){
var oOption,oSelect;
oSelect= document.all('tid');
for(var i=0;i<10;i++){
//每一个option对象都要进行新建
oOption = document.createElement("OPTION");
oOption.text="测试"+(i+1);
oOption.value=i;
oSelect.add(oOption);
}
alert("添加完成，现在select的innerHTML为：\n"+document.all('tid').innerHTML);
}
开船的 2003-09-19
  • 打赏
  • 举报
 回复
这样用
<script>
function mchange(mName){
var olds = document.getElementById('tid');
for(i=0;i<2;i++){
olds.options[i] = new Option("测试一","1")
}

}
</script>
<form name="PageForm" method="post" action="<%=thisPageName%>">
<div align="center">
<table width="90%" border="0" cellpadding="2" cellspacing="0">
<tr>
<td width="20%" height="22">模块分类 </td>
<td width="21%">
<select id="mid" name="model" onchange="mchange('aa')">
<option value="q">a</option>
<option value="b">bb</option>
<option value="c">cc</option>
</select>
</td>
<td width="16%">主题</td>
<td width="19%">
<select id="tid" name="topic">
</select>
</td>
<td width="24%"> </td>
</tr>
</table>
</div>
</form>
majunbo 2003-09-19
  • 打赏
  • 举报
 回复
看看这个

<html>
<head>
<title>List</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script LANGUAGE="javascript">
<!--
var onecount;
onecount=0;

subcat = new Array();
subcat[0] = new Array("徐汇区","01","001");
subcat[1] = new Array("嘉定区","01","002");
subcat[2] = new Array("黄浦区","01","003");
subcat[3] = new Array("南昌市","02","004");
subcat[4] = new Array("九江市","02","005");
subcat[5] = new Array("上饶市","02","006");

onecount=6;

function changelocation(locationid)
{
document.myform.smalllocation.length = 0;

var locationid=locationid;
var i;
document.myform.smalllocation.options[0] = new Option('====所有地区====','');
for (i=0;i < onecount; i++)
{
if (subcat[i][1] == locationid)
{
document.myform.smalllocation.options[document.myform.smalllocation.length] = new Option(subcat[i][0], subcat[i][2]);
}
}

}

//-->
</script>
</head>
<body>
<form name="myform" method="post">
<select name="biglocation" onChange="changelocation(document.myform.biglocation.options[document.myform.biglocation.selectedIndex].value)">
<option value="00" selected>==请选择==</option>
<option value="01">上海</option>
<option value="02">江西</option>
</select>
<select name="smalllocation">
<option selected value="">==所有地区==</option>
</select>
</form>
<script LANGUAGE="javascript">
<!--
changelocation(document.myform.biglocation.options[document.myform.biglocation.selectedIndex].value);
//-->
</script>
</body>
</html>
cloudchen 2003-09-19
  • 打赏
  • 举报
 回复
select对象中只有option标签是合法的html标签，其余的都被认做为是textNode
要在select中创建option元素，使用如下方法

select对象.列表[列表索引] = 一个新的列表(显示文字,值)

selectObj.options[selectObj.length] = new Option("文本","值")
one_bird 2003-09-19
  • 打赏
  • 举报
 回复
注：我是想在选择模块时，更新主题下拉列表
one_bird 2003-09-19
  • 打赏
  • 举报
 回复
我明明给document.all('tid').innerHTML的值是 "<option value='1' >测试一 </option > "
可是为什么我alert它的值时，却是"测试一 </option >",而且如果我给它赋值为:"aa <option value='1' >测试一 </option >"时，我再alert它的值时，它就是"aa <option value='1' >测试一 </option > "
是不是很奇怪呀?
zhaoweiwei 2003-09-19
  • 打赏
  • 举报
 回复
你要做什么么？
动态添加select的option [转载]
本文介绍三种在JavaScript中动态给select标签添加option的方法，包括使用new Option构造函数、document.createElement()和innerHTML属性。同时，提供了动态删除select选项的代码示例。
动态添加select的option （转）
本文介绍三种动态添加select标签option的方法，包括使用new Option构造函数、document.createElement方法以及直接修改innerHTML属性，并提供了动态删除option的示例。
关于inerHTML input value无效的问题
本文介绍了在IE9及以上浏览器中如何正确更新innerHTML的问题。详细讲述了如何通过设置attributes来更新文本框、select和radio等元素的值，确保更改能够被innerHTML正确反映。
一行代码dom操作在不同浏览器下的效率不同
本文探讨了在IE11等IE版本中使用jQuery的innerHTML, html(), append()方法为Select元素动态添加大量数据时的性能差异，并通过对比分析发现不同浏览器表现不一。着重介绍了IE9以上版本在处理此类操作时的性能瓶颈，以及IE8以下版本的相对优势。文章旨在帮助开发者理解并优化在IE环境下Select元素加载效率。
总结移动开发实践中遇到的坑
本文分享了移动端开发过程中遇到的各种调试问题及解决方案，包括inputplaceholder显示异常、line-height跨平台兼容性、rem单位应用、自定义select样式、innerHTML绘制限制、300ms点击延迟等。
JavaScript

87,987

社区成员

224,683

社区内容

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

加载中

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

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

+ 用AI写文章