jquery选择，创建输入框？

Question

我有一个下拉选择框，其内容如下：

<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>

基本上，我想做的是：

如果选择的值为9.99，则显示一个输入框，供他们输入某些内容。 如果选择的值为19.99，则显示5个输入框，供他们输入某些内容。 如果选择的值为39.99，则显示10个输入框，供他们输入某些内容。 如果选择了值199.99，则显示ONE输入框和name="state"，以便他们输入一些内容。

我希望新创建的输入框有一个名称，如name="pc1" name="pc2"等。除非选择了值199.99，否则我只希望用name="state"显示一个输入框。

我该怎么做呢？

Answer 1

在页面上为输入框添加一个容器，比如id "inputboxes“，然后尝试以下操作。

工作演示

$(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' />");
        }
    }); 
});

Answer 2

我会在每个文本框中放置两个类。

<option class="price1" value="9.99">1 = $9.99</option>

然后，在单击选项时，我会隐藏所有输入框，并将价格作为一个类，并在它们的类中显示带有priceX的所有输入框。

<input type=text class="price1 prices"/>
<input type=text class="price2 prices"/>

$(".list").click(function(){
  $(".prices").hide();
  $("input." & $(this).class()).show();
});

在获取单击项的类方面，上面的内容还没有经过测试，但其余的应该可以工作。

编辑

我在获取所选选项类名方面发现了这一点。

$('#' + $('option:selected', this).attr('class')).show(); 

Answer 3

下面的例子，

http://jsfiddle.net/L7enV/7/