软件学堂

网游分类软件分类

选择不同的列表项时显示不同的按钮

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”事件与一个已有的方法关联。

【源码下载】

本实例JS代码下载

上一篇:在按钮底部显示文字JS代码
下一篇:龙腾天下手游攻略

相关文章