怎样根据下拉列表框的选择动态生成输入框？

参考Select的onchange事件，根据当前值，确定要插入的内容。
可以用innerHTML方式向已存在的DOM元素内写入新的内容。

解决方案 »

  1.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <SCRIPT LANGUAGE="JavaScript">
      <!--
    function change(osel)
    {
    if(osel.value == '按部门'){
    document.getElementById('a1').style.display = 'block';
    document.getElementById('a2').style.display = 'none';
    document.getElementById('a3').style.display = 'none';
    }else{
    document.getElementById('a2').style.display = 'block';
    document.getElementById('a3').style.display = 'block';
    document.getElementById('a1').style.display = 'none';
    }
    }
      //-->
      </SCRIPT>
     </HEAD> <BODY>
     <SELECT id="osel" onchange="change(this)">
    <OPTION VALUE="按部门" SELECTED>按部门</option>
    <OPTION VALUE="按时间段">按时间段</option>
     </SELECT>
     <INPUT TYPE="text" id="a1" >
     <INPUT TYPE="text" id="a2" style="display:none"><INPUT TYPE="text" id="a3"style="display:none">
      
     </BODY>
    </HTML>
      

  2.   

    <script type="text/javascript">
     function formonclick(k)
    {
    switch (k)
    {
    case "2":
    document.getElementById('d').innerHTML="开始时间:"+iinput("13","shijina")+" - 结束时间:"+iinput("13","shijina1");
    break;
    case "1":
    document.getElementById('d').innerHTML="部门:"+iinput("30","q");
    break;
    }
    }
    function iinput(s,n)
    {
    return "<input id="+n+" maxlength=100 size="+s+" name="+n+" value=''>";
    }
    </script>
    <form action="" method=POST  name="form1" >
    <select name="selkey" onChange="formonclick(document.form1.selkey.options[document.form1.selkey.selectedIndex].value)">
    <option value="1">按部门</option>
    <option value="2">按时间</option>
    </select>
    </form>
    <div id="d"></div>