日期:2014-05-16  浏览次数:20299 次

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