JS实现下拉菜单

下面是代码,适合学习学习!

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



上面都是简单实现一些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

如果您觉得我的文章有帮助,请随意赞赏!

*发表评论

用QQ账号登录  请登录后发表评论