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，则显示1输入框以供他们输入   一些东西。

如果选择值19.99，则显示5个输入框以供他们输入   一些东西。

如果选择值39.99，则显示10个输入框以供他们输入   一些东西。

如果选择值199.99，则显示 ONE 输入框   name="state"让他们输入内容。

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

我将如何做到这一点？

Answer 1

在页面上为输入框添加一个容器，并说出id“inputboxes”并尝试此操作。

正在使用 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' />");
        }
    }); 
});

Answer 2

我会针对每个文本框放置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/

Answer 4

我不会通过下拉列表执行此操作。试试手风琴：

http://jqueryui.com/demos/accordion/

这是一个小提琴作为你所说的开头：

http://jsfiddle.net/7KwA9/6/

以下是该小提琴的代码：

<div id="accordion">
    <h3><a href="#">1 = $9.991</a></h3>
    <div>
        <form>
            <input type="hidden" name="type" value="9.99"/>
            <label>pc1 <input type="text" name="pc1" /></label>
        </form>
    </div>
    <h3><a href="#">5 = $19.99</a></h3>
    <div>
        <form>
            <input type="hidden" name="type" value="19.99"/>
            <label>pc1 <input type="text" name="pc1" /></label><br/>
            <label>pc2 <input type="text" name="pc2" /></label><br/>
            <label>pc3 <input type="text" name="pc3" /></label><br/>
            <label>pc4 <input type="text" name="pc4" /></label><br/>
            <label>pc5 <input type="text" name="pc5" /></label><br/>
        </form>
    </div>
    <h3><a href="#">10 = $39.99</a></h3>
    <div>
        etc...
    </div>
    <h3><a href="#">All = $199.99</a></h3>
    <div>
        etc...
    </div>
</div>

使用这样的javascript：

$(function() {
    $( "#accordion" ).accordion();
});

jquery选择，创建输入框？

4 个答案: