2012-10-18 来源:网络
【实例名称】
选择不同的列表项时显示不同的按钮
【实例描述】
根据用户的选择不同,可显示不同的按钮,这需要学习动态创建按钮的技术。本例学习通过一个下拉列表的选择动态创建按钮,并设置按钮的单击事件。
【实例代码】
<HTML> <HEAD> <title>测试列表选择项 </title> <script> function butSelect(){ var selVal = document.getElementById("sel").value; if(selVal == "1"){ document.getElementById("td").innerHTML = '<input type="button" value="按钮1" onclick="btnc1();">'; }else if(selVal == "2"){ document.getElementById("td").innerHTML = '<input type="button" value="按钮2" onclick="btnc2();">'; }else{ document.getElementById("td").innerHTML = ''; } } function btnc1(){ alert("单击了按钮1"); }
function btnc2(){ alert("单击了按钮2"); } </script> </HEAD> <BODY> <table> <tr> <td> <select onChange="butSelect();" id="sel"> <option value="" > <option value="1">but1 <option value="2">but2 </select> </td> <td id="td"></td> </tr> </table> </BODY> </HTML>
【运行效果】
【难点剖析】
本例的重点是如何将动态创建的按钮添加到指定位置,以及如何为动态按钮绑定单击事件。“innerHTML”是大部分容器控件都具备的属性,表示容器内的HrML代码,因为动态生成的“input”控件是一段HTML文本,所以不能使用类似“value”的属性将按钮添加到容器中。在创建按钮时,直接指定按钮的“click”事件与一个已有的方法关联。
【源码下载】