Q: display textbox as per the value selected from dropdown <select>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
</select>

Hi everyone :)
I have a page with drop down list and text box.The drop down list contains numbers.. once the user select value from drop down list it will display text boxes based on the chosen number...
I don't know how to perform this function :(
I need help ..
If 1 is selected from dropdown 1 text box should be displayed , if 2 is selected from dropdown 2 text box should be displayed...same as for remaining...
Thankyou..

A: 
  <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
<title></title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {

        $('#slct').change(function () {
            var value = $(this).val(); var toAppend = '';
            if (value == 1) {
                toAppend = "<input type='textbox' >"; $("#container").html(toAppend); return;
            }
            if (value == 2) {
                toAppend = "<input type='textbox' >&nbsp;<input type='textbox' >"; $("#container").html(toAppend); return;
            }
            if (value = 3) {
                toAppend = "<input type='textbox' >&nbsp;<input type='textbox' >&nbsp;<input type='textbox' >"; $("#container").html(toAppend); return;

            }

        });

    });
     </script>
  </head>
 <body>
<form id="form1" runat="server">
<div>
     <select id="slct">
   <option value="1"> 1 </option>
     <option value="2"> 2 </option>
   <option value="3"> 3 </option>
    </select>
   <div id="container"></div>
</div>
</form>
  </body>
   </html>

if jquery didn't work to you try this code : 
 function change() {
        var select = document.getElementById("slct");
        var divv = document.getElementById("container");
        var value = select.value;
        if (value == 1) {
            toAppend = "<input type='textbox' >"; divv.innerHTML=toAppend; return;
            }
            if (value == 2) {
                toAppend = "<input type='textbox' >&nbsp;<input type='textbox' >";divv.innerHTML = toAppend;  return;
            }
            if (value = 3) {
                toAppend = "<input type='textbox' >&nbsp;<input type='textbox' >&nbsp;<input type='textbox' >";divv.innerHTML = toAppend;  return;

            }
     }

<select id="slct" onchange="change();">
 <option value="1"> 1 </option>
<option value="2"> 2 </option>
 <option value="3"> 3 </option>
  </select>
  <div id="container"></div>


A: You can try this code:
<html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {

        $('#slct').change(function () {
            var value = $(this).val(); var toAppend = '';
            if (value == 1) {
                toAppend = "<input type='textbox' >"; $("#container").html(toAppend); return;
            }
            if (value == 2) {
                toAppend = "<input type='textbox' >&nbsp;<input type='textbox' >"; $("#container").html(toAppend); return;
            }
            if (value = 3) {
                toAppend = "<input type='textbox' >&nbsp;<input type='textbox' >&nbsp;<input type='textbox' >"; $("#container").html(toAppend); return;

            }

        });

    });
     </script>
  </head>
 <body>
<form id="form1" runat="server">
<div>
     <select id="slct">
   <option value="1"> 1 </option>
     <option value="2"> 2 </option>
   <option value="3"> 3 </option>
    </select>
   <div id="container"></div>
</div>
</form>
  </body>
   </html>

