Question

I have a dropdown selection box with the following:

<select name="type" id="speedB" style="width:324px;">
    <option value="">Please Select</option>
    <option value="9.99">1 = $9.99</option>
    <option value="19.99">5 = $19.99</option>
    <option value="39.99">10 = $39.99</option>                          
    <option value="199.99">All = $199.99</option>
</select>

Basically, what I want to do is:

If value 9.99 is chosen, display 1 input box for them to enter
something in to.

If value 19.99 is chosen, display 5 input boxes for them to enter
something in to.

If value 39.99 is chosen, display 10 input boxes for them to enter
something in to.

If value 199.99 is chosen, display ONE input box with the
name="state" for them to enter something in to.

I want the newly created input boxes to have a name such as name="pc1" name="pc2" etc.. unless value 199.99 is chosen, I only want one input box to be shown with the name="state"

How would I go about doing this?

Answer 1

Add a container for the input boxes on the page with say id “inputboxes” and try this.

Working demo

$(function(){
    $("#speedB").change(function(){
        var $inputboxes = $("#inputboxes").html(''), inpCount = 0;
        if(this.value == "9.99"){
            inpCount = 1;
        }
        else if(this.value == "19.99"){
            inpCount = 5;
        }
        else if(this.value == "39.99"){
            inpCount = 10;
        }
        else if(this.value == "199.99"){
            inpCount = "ALL";
        }
       for(var i = 0;i<inpCount;i++){
           $inputboxes.append("<input type='text' name='pc"+(i+1)+"' /><br />");
       }
        if(inpCount == "ALL"){
            $inputboxes.append("State: <input type='text' name='pc1' />");
        }
    }); 
});