读书人

增加text box?该怎么处理

发布时间: 2012-03-07 09:13:51 作者: rapoo

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

读书人网 >JavaScript

热点推荐