Javascript 从选择和克隆表单中获取值的次数

我有一个选择框，我希望用户选择值，然后在获得值后，表单将根据所选值添加到页面中，例如，如果用户选择“1”，将添加1个表单，如果用户选择“10”10个表单。此外，如果未给出任何信息或未选择任何表单，则不显示任何表单。这似乎是我的js中的问题，它确实添加了表单，但也添加了其他我不期望的表单

<div class="form-group">
                                        <label>Number of travellers</label>
                                        <select class="form-control" id="travellersNumber">
                                            <option value="0">Select Numbers Of Travellers</option>
                                            <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>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                        </select>
                                    </div>

<div class=bookForm>

<div class=col-xs-12>

<h3 class=bookForm-heading>Submit your details</h3>

</div>

<div class="col-xs-12 col-md-3">

<div class=form-group>

<label>First Name</label>

<input class=form-control name=firstName>

</div>
</div>
</div>

.bookForm{
    display:none;
  }

function bookFormToggle(){
    var traveller = $("#travellersNumber");
    var form = $(".bookForm");
    var heading = $('.bookForm-heading');
    function unhideForm(){
        var travellerValue = parseInt(traveller.val());
        for(i=0;i<travellerValue;i++){
                heading = heading.html('Traveller '+ (i+1) +' Information');
                form.clone().insertAfter(form);
        }
    }
    traveller.on("change",unhideForm);
    unhideForm();
}
bookFormToggle();

<div class="form-group">
                                        <label>Number of travellers</label>
                                        <select class="form-control" id="travellersNumber">
                                            <option value="0">Select Numbers Of Travellers</option>
                                            <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>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                        </select>
                                    </div>

<div class=bookForm>

<div class=col-xs-12>

<h3 class=bookForm-heading>Submit your details</h3>

</div>

<div class="col-xs-12 col-md-3">

<div class=form-group>

<label>First Name</label>

<input class=form-control name=firstName>

</div>
</div>
</div>

.bookForm{
    display:none;
  }

function bookFormToggle(){
    var traveller = $("#travellersNumber");
    var form = $(".bookForm");
    var heading = $('.bookForm-heading');
    function unhideForm(){
        var travellerValue = parseInt(traveller.val());
        for(i=0;i<travellerValue;i++){
                heading = heading.html('Traveller '+ (i+1) +' Information');
                form.clone().insertAfter(form);
        }
    }
    traveller.on("change",unhideForm);
    unhideForm();
}
bookFormToggle();

函数bookFormToggle（）{
var traveller=$（“#travellersNumber”）；
变量形式=$（“.bookForm”）；
变量标题=$（'.bookForm标题'）；
函数unhideForm（）{
var travellerValue=parseInt（traveler.val（））；
对于（i=0；i

函数填充（）
{
var forms=$（“#填充”）.val（）；
如果（表格！=0）
{
var formelements=''；
对于（i=1；i

函数填充（）
{
var forms=$（“#填充”）.val（）；
如果（表格！=0）
{
var formelements=''；
我希望这就是你想要的


$（函数（）{
$（“#travellersNumber”）。在（'change'，function（）{
var Traveler=$（本）；
变量形式=$（“#原件”）；
变量标题=$（'.bookForm标题'）；
var travellerValue=parseInt（traveler.val（））；
$（“#原件”）.hide（）；
$（“[id*='original_']”。不是（“#original”）。remove（）；//删除除原始表单以外的所有表单
对于（i=0；i


.书单{
显示：无；
}
旅客人数
选择旅客人数
1.
2.
3.
4.
5.
6.
7.
8.
9
10
提交您的详细信息
名字
希望这就是你想要的


$（函数（）{
$（“#travellersNumber”）。在（'change'，function（）{
var Traveler=$（本）；
变量形式=$（“#原件”）；
变量标题=$（'.bookForm标题'）；
var travellerValue=parseInt（traveler.val（））；
$（“#原件”）.hide（）；
$（“[id*='original_']”。不是（“#original”）。remove（）；//删除除原始表单以外的所有表单
对于（i=0；i


.书单{
显示：无；
}
旅客人数
选择旅客人数
1.
2.
3.
4.
5.
6.
7.
8.
9
10
提交您的详细信息
名字
问题在于您没有删除已添加的旧表单


$（文档）.ready（函数（）{
var Traveler=$（'select[name=“trav”]”）；
Traveler.change（函数（）{
$（'.bookForm'）。不是（'.bookForm:first'）。删除（）；
var travellerValue=traveler.val（）；
var form=$（'.bookForm:first'）；
对于（i=TravelerValue；i>1；i--）{
var newAdd=form.clone（）.insertAfter（form）；
newAdd.find（'.bookForm heading'）.html（'traveler'+（i）+'Information'）；
}
$（'.bookForm'）.show（）；
});
})；
.bookForm{
背景颜色：绿色；
填充物：5px；
保证金：5px；
}
#旅行家人数{
宽度：150px；
}

旅客人数
选择旅客人数
1.
2.
3.
4.
5.
6.
7.
8.
9
10
提交您的详细信息
名字
问题在于您没有删除已添加的旧表单


$（文档）.ready（函数（）{
var Traveler=$（'select[name=“trav”]”）；
Traveler.change（函数（）{
$（'.bookForm'）。不是（'.bookForm:first'）。删除（）；
var travellerValue=traveler.val（）；
var form=$（'.bookForm:first'）；
对于（i=TravelerValue；i>1；i--）{
var newAdd=form.clone（）.insertAfter（form）；
newAdd.find（'.bookForm heading'）.html（'traveler'+（i）+'Information'）；
}
$（'.bookForm'）.show（）；
});
})；
.bookForm{
背景颜色：绿色；
填充物：5px；
保证金：5px；
}
#旅行家人数{
宽度：150px；
}

旅客人数
选择旅客人数
1.
2.
3.
4.
5.
6.
7.
8.
9
10
提交您的详细信息
名字