Question

I have select box and one table, in select box I have 1 to 5 numbers if I select 2 from select box the table should be show 2 times.

Here is my code..

<script type="text/javascript">
$(document).ready(function(){
$('#Lessons').change(function(){
     var lesNum = $('#Lessons').val();
     for(k=1;k<=lesNum;k++){
         $("#xyz").css("display", "block");
     }
});
});
</script>  

and my table code is here:

<select id="Lessons" name="Lessons">
   <?php for($j=1;$j<=5;$j++):?>
       <option value="<?=$j?>"><?=$j?></option>
   <?php endfor;?>
</select>
<div id="xyz" style="display:none;">
 <table>
   //some table data goes here.
 </table>
</div>

Can anyone help me out?

Answer 1

Here is what you can use:

HTML

<select id="Lessons" name="Lessons">
   <?php for($j=1; $j <= 5; $j++) {
        echo "<option value="$j">$j</option>";
        }
   ?> </select>
<div id="result"></div>

JavaScript

$(document).ready(function(){
    var table = '<?php echo "<table></table>"; /* Generating the table */ ?>',
        parent = $('#result');
    $('#Lessons').change(function(){
        var lesNum = parseInt($('#Lessons').val(), 10);
        parent.empty();
        for(var k=1;k<=lesNum;k++){
            parent.append(table);
        }
    });
});​

I can recommend you to stay away from globals (k in the loop).
​
And a JSFiddle example: http://jsfiddle.net/pWLhS/5/