<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<link href="//cdn.bootcss.com/amazeui/2.7.2/css/amazeui.min.css" rel="stylesheet">
<script>
$(function(){
$("#lhnum").change(function(){
var lhnum = $("#lhnum").val();
for(var i = 1;i<=lhnum;i++){
$("#lhul").append("<li id='lhli'>"+i+"号楼层数:<input class='am-input-field' type='text' id='"+i+"lcnum' /><button class='am-btn am-btn-success' id='"+i+"' οnclick='addHouselc(this.id)'>+</button><ul id='lcul"+i+"'></ul></li>");
}
});
});
function addHouselc(id){
var obj = id+"lcnum";
var num = $("#"+obj+"").val();
for(var j = 1;j<=num;j++){
$("#lcul"+id+"").append("<li>第"+j+"层户数:<input class='am-input-field' type='text' id='"+j+"zhnum' /></li>");
}
}
</script>
<style>
li{
list-style-type: none;
}
</style>
</head>
<body>
添加小区:<input type="text" name="" id="xq" value="" /><br />
添加楼号:<input type="number" name="" id="lhnum" value="" /><br />
<ul id="lhul" class="am-list am-list-static">
</ul>
</body>
</html>
样式是随便用的amazeui的,没太细心调整,仅仅做个记录!
楼号输入框元素用jquery的change方法当输入框失去焦点时自动生成各楼输入框