下面是代码,适合学习学习!
<SCRIPT type="text/javascript">
function chsel2(){
var qq=document.getElementsByName("ss")[0];
obj_div=document.getElementById("tt_div");
if(qq[qq.selectedIndex].value==2){
obj_div.innerHTML="<table><tr><td>id:</td><td>李猛</td></tr><tr><td>name:</td><td>飞去</td></tr></table>";
}
if(qq[qq.selectedIndex].value==1){
str="<table><tr><td>id:</td><td>神舟归来</td></tr><tr><td>name:</td><td>国庆来临</td></tr>";
str=str+"<tr><td>hello</td><td><input type='text' value='' name=parame[id]></td></tr></table>";
obj_div.innerHTML=str;
}
}
</SCRIPT>
<form name="ff">
<select name="ss" onChange="chsel2();">
<option value=0>请选择品牌</option>
<option value=1>tcl_id</option>
<option value=2>sony_hello world</option>
</select>
</form>
<table border="1">
<tr><td>helllo world</td><td>how do yoe do?</td></tr>
<tr><td>id 1:</td><td>虎虎虎虎</td></tr>
<tr><td colspan="2"><div align="center" id="tt_div"></div></td></tr>
</table>
function chsel2(){
var qq=document.getElementsByName("ss")[0];
obj_div=document.getElementById("tt_div");
if(qq[qq.selectedIndex].value==2){
obj_div.innerHTML="<table><tr><td>id:</td><td>李猛</td></tr><tr><td>name:</td><td>飞去</td></tr></table>";
}
if(qq[qq.selectedIndex].value==1){
str="<table><tr><td>id:</td><td>神舟归来</td></tr><tr><td>name:</td><td>国庆来临</td></tr>";
str=str+"<tr><td>hello</td><td><input type='text' value='' name=parame[id]></td></tr></table>";
obj_div.innerHTML=str;
}
}
</SCRIPT>
<form name="ff">
<select name="ss" onChange="chsel2();">
<option value=0>请选择品牌</option>
<option value=1>tcl_id</option>
<option value=2>sony_hello world</option>
</select>
</form>
<table border="1">
<tr><td>helllo world</td><td>how do yoe do?</td></tr>
<tr><td>id 1:</td><td>虎虎虎虎</td></tr>
<tr><td colspan="2"><div align="center" id="tt_div"></div></td></tr>
</table>
上面都是简单实现一些onchange()功能的.不过里面用到innerHTML,举上面的例子:用这个方法时,要注意
<div>在html中的位置,即四周的环境。<div>在<table>或<tr>下,就会报错,说运行异常;当innerHTML里面的内容不以<table>开头时,在上例的事件中没有反应。
下面说一说innerHTML,innerText,outerHTML的区别。
例:<div id="h_div"><p><a>hello world!</a></p></div>
则:innerHTML="><p><a>hello world!</a></p>"
innerText ="hello world!"
outerHTML="<div id="h_div"><p><a>hello world!</a></p></div>"
本文来自Memory's Blog