Question

如何创建此html表单：按钮收音机是/否

如果用户点击是，我们会显示一个下拉列表（1/2/3值），如果他在下拉列表中选择值3，我们会显示3个文本输入字段。任何jsfiddle？

我的代码（我的代码开头）：

<ul>
<li>
    <label for="id_NOU">How many restaurant:</label>
    <select name="NOU" id="id_NOU">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
    </select>
</li>
<li class="list">
    <label>How many user for this restaurant  1</label>
    <input type="text" id="unit1"></input>
</li>

http://jsfiddle.net/6VQDR/5/

Answer 1

只需更改代码中的以下更改

即可

HTML：

<input type="radio" class="test" name="temp" value="yes">yes
<br>
 <input type="radio" name="temp" class="test" value="no">no
<ul class="shown" style="display:none;">
    <li>
        <label for="id_NOU">How many restaurant:</label>
        <select name="NOU" id="id_NOU">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
        </select>
    </li>
    <li class="list">
        <label>How many user for this restaurant  1</label>
        <input type="text" id="unit1"></input>
    </li>
</ul>

jQuery：

$(document).ready(function(){
    $('#id_NOU').change(function () {
        var total = $(this).val();

        //remove all
        $('.list').each(function (index) {
            if (index != 0) $(this).remove();
        });

        //create new ones
        for (var i = 2; i <= total; i++) {
            element = $('.list:first').clone();
            element.find('input').attr('id', 'unit' + i);
            element.find('label').html('how many user for this restaurant ' + i);
            element.appendTo('ul');
        }
    });
    $(document).on("click",".test",function(e){

        var mystring = $(this).val();
        alert(mystring);
        if($(this).is(':checked') && mystring == 'yes'){
            $(".shown").show();
        }else{
            $(".shown").hide();
        }
    });
});

您还可以查看小提琴链接http://jsfiddle.net/6VQDR/6/ 我希望这能帮到您。

Answer 2

目前尚不清楚最终形式的确切外观。然而，这是一个如何实现你所描述的效果的人为例子：

$('.yesno').click(function () {
    $('#pickNumber').toggleClass();
});

$('#id_NOU').change(function () {
    $('#selections').html('');
    var num = $(this).val();
    for (var i = 0; i < num; i++) {
        $('#selections').append('<li class="list"> <input type="text" class="things"></input> </li>');
    }
});

.beginsHidden {
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>
        <input type="radio" class="yesno" name="addStuff" value="yes" id="addStuff_0" />Yes
        <input type="radio" class="yesno" name="addStuff" value="no" id="addStuff_1" />no</li>
    <li class="beginsHidden" id="pickNumber">
        <label for="id_NOU">How Many</label>
        <select name="NOU" id="id_NOU">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </li>
</ul>
<ul id="selections"></ul>

Jquery动态创建表单

2 个答案: