通过select选中不同的选项,来控制追加个数,但是一直被覆盖只能留下一个,后来请教了大神,才解决掉,在此做个记录
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container{display: block;height: auto;width: auto;}
</style>
</head>
<body>
<p class="fam">
<label>户型:</label>
<select name="rooms" id="rooms" />
<option value="">请选择</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></select>
<span>室</span>
</p >
<div class="container"></div>
</body>
<script type="text/template" id="roomTemp">
<div class="room_num">
<p>
<label for="房间名称">房间名称</label>
<input type="text" name="roomName[]">
</p >
<p>
<label for="房间价格">房间价格</label>
<input type="text" name="costed[]">
</p >
</div>
</script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" >
$("#rooms").on("change", function() {
add();
});
function add() {
var roomNum = $("#rooms").val();
var htmlTmp = []
for(var i = 1; i <= roomNum; i++) {
debugger;
htmlTmp.push($("#roomTemp").html());
}
$(".container").html(htmlTmp);
}
</script>
</html>