javascript - 从选择和克隆表单中获取值(value)的次数

Question

我有一个选择框，我希望用户选择值，然后在获取值后根据所选值将表单添加到页面中，就像如果用户选择“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();

Answer 1

希望这就是你想要的。

$(function () {
	$("#travellersNumber").on('change', function () {
		var traveller = $(this);
		var form = $("#original");
		var heading = $('.bookForm-heading');
		var travellerValue = parseInt(traveller.val());
		$("#original").hide();

		$("[id*='original_']").not("#original").remove(); //Remove all forms except original form

		for (i = 0; i < travellerValue; i++) {
			if (i == 0) {
				heading = heading.html('Traveller 1 Information');
				$("#original").show();
			}
			else
			{
				var cloneDiv = form.clone().prop("id", "original_" + i).appendTo("#travellersDetail");
				cloneDiv.find(".bookForm-heading").html('Traveller ' + (i + 1) + ' Information');
			}
		   
		}
	});
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>
	.bookForm {
		display: none;
	}
</style>

<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" id="original">
	<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>

<div id="travellersDetail"></div>