Jquery动态创建表单答案

【问题标题】：Jquery create dynamically formJquery动态创建表单
【发布时间】：2015-05-07 12:48:05
【问题描述】：

如何创建这个 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/

【问题讨论】：

您可以使用您在 HTML 和 JavaScript 方面的知识来创建它。
我不知道如何用单选按钮制作
试试这个w3schools.com/htmL/html_forms.asp
@TheJoker：我的回答比纠正它更能帮助你，因为其他人遇到的错误比它容易解决的错误。
@Lalitpatadiya Ya 但是当他选择是时，我如何通过下拉字段更改输入字段

标签： jquery html forms dynamic jsfiddle

【解决方案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/ 我希望这能帮到您。

【讨论】：

【解决方案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>

【讨论】：