CODEWITHSUNDEEP
jquery
Tan Viet
Tan Viet

Reputation: 2113

Jquery: How to show the number of contents we want

I have the HTML code

<div class="content">
    Question : <input type="text" size="30"/><br />
    Answer A :  <input type="text" size="30"/><br />   
    Answer B :  <input type="text" size="30"/><br />   
    Answer C :  <input type="text" size="30"/><br />   
    Answer D :  <input type="text" size="30"/><br />  
   Correct Answer :
        <input type="radio" name="a"/> A 
        <input type="radio" name="b"/> B 
        <input type="radio" name="c"/> C 
        <input type="radio" name="d"/> D 
</div>

Please select the number of questions you want to display
<select class="choice">
    <option selected="selected">Select</option>
    <option value="2">2</option>
    <option value="4">4</option>
</select>

<div class="display">

</div>

and here is jQuery code to handle 

$(document).ready(function(){
        $(".content").hide();     

        $("select.choice").change(function(){
            var i = parseInt($(this).attr("value")) ;
            var j;
            for(j = 1; j<=i ; j++){
                $(".content").show().appendTo($(".display"));
            }  
        }); 
    })

But the result is only a question to be shown although I selected option "2" . So how can I display the number of questions when I select the option ?

Thanks !

Upvotes: 1

Views: 84

Answers (1)

Mark
Mark

Reputation: 5720

You need to clone

$(".content").clone().appendTo($(".display")).show();

Basically your code is moving the contents of .content to .display, so when you loop through there is nothing in .content after the first pass. If you use clone() it will clone it or copy it and not move it.

You should also move .show() to the end after its been cloned. Otherwise you will be showing the original and not the clones in .display.

Upvotes: 1

Related Questions