增加text box?
- HTML code
<form id="form1" name="form1" method="post" action=""><table width="600" border="1"> <tr> <td>Total Question:</td> <td><select name="total_question" id="total_question"> <option value="1" selected="selected">1</option> <option value="2">2</option> <option value="3">3</option> </select> </td> </tr> <tr> <td>Question</td> <td><input type="text" name="question" id=" question " /></td> </tr></table></form>
有一个 list box, 数值是整数 1 to 3
当list box 数值改变时,
下面的的 text box 数量便会对应增加.
如何实作?
[解决办法]
- HTML code
<script>function doit(sel){ var f = document.form1; var n = sel.options[sel.selectedIndex].value; for(var i=1;i<f.question.length;i++) f.question[i].style.display = "none"; for(var i=1;i<n;i++) f.question[i].style.display = "block";}</script><form id="form1" name="form1" method="post" action=""><table width="600" border="1"> <tr> <td>Total Question:</td> <td><select name="total_question" id="total_question" onchange="doit(this);"> <option value="1" selected="selected">1</option> <option value="2">2</option> <option value="3">3</option> </select> </td> </tr> <tr> <td>Question</td> <td> <input type="text" name="question" id="question" /> <input type="text" name="question" id="question" style="display:none;"/> <input type="text" name="question" id="question" style="display:none;"/> </td> </tr></table></form>
[解决办法]
- HTML code
<form id="form1" name="form1" method="post" action=""><table width="600" border="1"> <tr> <td>Total Question:</td> <td><select name="total_question" id="total_question"> <option value="1" selected="selected">1</option> <option value="2">2</option> <option value="3">3</option> </select> </td> </tr> <tr> <td>Question</td> <td id="txtContainer"><input type="text" name="question" id=" question " /></td> </tr></table></form><script type="text/javascript">var list = document.getElementById("total_question");function genText(){ createInput(list.options[list.selectedIndex].value)}function createInput(num){ var txt = document.createElement("<input type='text' />"); txt.id=num; document.getElementById("txtContainer").appendChild(txt);}list.onchange=genText;</script>