how to get a text box with the value selected in select box

Question

hi This is my view page here i have a select box

<tr>
    <td>Chidren</td>
    <td>:</td>
    <td><select style="font-family: verdana; min-width: 52px;" id="ddlChildren"
             name="ddlChildren"  class="required" onChange="return Check_Adult('dd1Age')" >
            <option value="">children</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option></select>
    </td>
  </tr>

with the value from select box if the value is one then i need to create a text box if the value is two then i need to create two ,,, and respectively In my Check_Adult javascript function ,,I did this

   function Check_Adult()
{
    alert('hi');
    var Child= document.getElementById('ddlChildren').value;
    alert(Child);
    if(Child == 1)
    {
       var tbox = document.createElement('input');
       tbox.setAttribute('type', 'text');
       var frm = document.forms[0];
       frm.appendChild(tbox);
       frm.appendChild(tbox2);

       var sel = document.createElement('select');
        sel.setAttribute('type', 'text');
       var frm = document.forms[0];
       frm.appendChild(sel);
    }
}

But the text box is not created how to create it?

Answer 1

You can do like:

function Check_Adult()
{
    var Child= document.getElementById('ddlChildren').value;

    if(Child == 1)
    {
       var tbox = document.createElement('input');
       tbox.setAttribute('type', 'text');
       var frm = document.forms[0];
       frm.appendChild(tbox);
    }
    else if(Child == 2)
    {
       var tbox = document.createElement('input');
       var tbox2 = document.createElement('input');
       tbox.setAttribute('type', 'text');
       tbox2.setAttribute('type', 'text');
       var frm = document.forms[0];
       frm.appendChild(tbox);
       frm.appendChild(tbox2);
    }
    // and son on
}

Update:

You can do like this too:

function Check_Adult()
{
    var Child= document.getElementById('ddlChildren').value;
    var frm = document.forms[0];

    for (var i = 1, i<= Child; i++)
    {
       var tbox = 'tbox' + i;
       tbox = document.createElement('input');
       tbox.setAttribute('type', 'text');
       frm.appendChild(tbox);
    }
}