HTML dynamically adds input and supports modification

Haven't added style yet, let's do it

<!DOCTYPE html>
<html>

<head>

	<meta charset="UTF-8">

	<title>需求信息填写</title>
	<script type="text/javascript" src="jquery-1.7.2.js"></script>
	<script type="text/javascript">


		function del() {
			$("#new2_label2020").remove();
		}
		var myArray=new Array();
		function sele_Change1() {
			var oOpt1  = document.getElementById("m_select1");
			var opt_txt1 = oOpt1 .options[oOpt1.selectedIndex].value;
			var oOpt2  = document.getElementById("m_select2");
			var opt_txt2 = oOpt2 .options[oOpt2.selectedIndex].value;

			InputCount = opt_txt1;
			max_lenth=opt_txt2;
			var total_amount=0;
			for (var i=0; i<max_lenth; i++){
				var oOpt3  = document.getElementById("new1_input" + InputCount + "").value;

				// var opt_txt3 = oOpt3 .options[oOpt3.selectedIndex].value;
				var oOpt4  = document.getElementById("new2_input" + InputCount + "").value;

				// var opt_txt4 = oOpt4 .options[oOpt4.selectedIndex].value;
				InputCount++;

				// total_amount = parseInt(total_amount)+parseInt(oOpt3)+parseInt(oOpt4);
				total_amount = parseFloat(total_amount)+parseFloat(oOpt3)+parseFloat(oOpt4);

				console.log(total_amount)
				$("#total_money").val(total_amount);


			}

		}

		function sele_Change2(e){
			var oOpt1  = document.getElementById("m_select1");
			var opt_txt1 = oOpt1 .options[oOpt1.selectedIndex].value;
			var oOpt2  = document.getElementById("m_select2");
			var opt_txt2 = oOpt2 .options[oOpt2.selectedIndex].value;

			InputCount = opt_txt1;
			max_lenth=opt_txt2;
			console.log(myArray)
			if(myArray.length!=0){
				console.log("delete progress")
				for(var j=0;j<myArray.length;j++){
					console.log(myArray[j])
					$("#new1_label"+myArray[j]+"").remove();
					$("#new2_label"+myArray[j]+"").remove();
				}
			}



			for (var i=0; i<max_lenth; i++){

				$("#InputsWrapper").append('<label id="new1_label' + InputCount + '" class="text"><span id="news_1' + InputCount + '"></span> <div class="input-wrapper"><input onchange="sele_Change1()" id="new1_input' + InputCount + '" type="text" maxlength="11" oninput = "value=value.replace(/[^\\d]/g,\'\')"  placeholder="请输入经费数额" /> </div></label>');
				$("#news_1" + InputCount + "").html(InputCount+"生活支出：");

				$("#InputsWrapper").append('<label id="new2_label' + InputCount + '" class="text"><span id="news_2' + InputCount + '"></span> <div class="input-wrapper"><input onchange="sele_Change1()" id="new2_input' + InputCount + '" type="text" maxlength="11" oninput = "value=value.replace(/[^\\d]/g,\'\')"  placeholder="请输入经费数额"/> </div></label>');
				$("#news_2" + InputCount + "").html(InputCount+"学费支出：");

				myArray.push(InputCount)
				InputCount++;


			}

		}
	</script>

	<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
	<meta name="viewport"  content="initial-scale=1, width=device-width">
</head>

<body>

<form id="form">

	<label class="text">
		<span>入学年份：</span>
		<div class="input-wrapper">
			<select id="m_select1" name = "m_select1" size="1">
				<option value="2020">2020</option>
				<option value="2021">2021</option>
				<option value="2022">2022</option>
				<option value="2023">2023</option>
			</select>
		</div>
	</label>

	<label class="text">
		<span>入学时长（年）：</span>
		<div class="input-wrapper">
			<select id="m_select2" name = "m_select2" size="1" onchange="sele_Change2()">
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
			</select>
		</div>
	</label>

	<label class="text">
		<span>学位类型：</span>
		<div class="input-wrapper">
			<select id="m_select3" name = "m_select3" size="1" onchange="sele_Change2()">
				<option value="1">学硕</option>
				<option value="2">专硕</option>
				<option value="3">在职</option>
			</select>
		</div>
	</label>

	<label class="text" >
		<span>专业名称：</span>
		<div class="input-wrapper">
			<input id= "inpmission" name="inpmission" type="text" placeholder="请输入"/>

		</div>
	</label>


	<label  class="text">
		<span>研究方向：</span>
		<div class="input-wrapper">
			<input id="proarea"  id="proarea" type="text" placeholder="请输入"/>
		</div>
	</label>


	<label class="text">
		<span>研究背景：</span>
		<div class="input-wrapper">
			<textarea id="resback" name="resback" maxlength="300" onchange="this.value=this.value.substring(0, 300)" onkeydown="this.value=this.value.substring(0, 300)" onkeyup="this.value=this.value.substring(0, 300)"style="min-height:50px;min-width:825px;max-height:50px;max-width:70px;">请详细描述（300字以内）</textarea>
		</div>
	</label>

	<label class="text">
		<span>研究内容：</span>
		<div class="input-wrapper">
			<textarea id="rescontent" name="rescontent" maxlength="300" onchange="this.value=this.value.substring(0, 300)" onkeydown="this.value=this.value.substring(0, 300)" onkeyup="this.value=this.value.substring(0, 300)"style="min-height:50px;min-width:825px;max-height:50px;max-width:70px;">请详细描述（300字以内）</textarea>
		</div>
	</label>

	<label id= "InputsWrapper"  class="text">
		<span>研究目标：</span>
		<div class="input-wrapper">
			<textarea id="resgoal" name="resgoal" maxlength="300" onchange="this.value=this.value.substring(0, 300)" onkeydown="this.value=this.value.substring(0, 300)" onkeyup="this.value=this.value.substring(0, 300)"style="min-height:50px;min-width:825px;max-height:50px;max-width:70px;">请详细描述（300字以内）</textarea> <br><br><br>
		</div>
	</label>

	<label class="text">
		<span>总消费（元）：</span>
		<div  class="input-wrapper">
			<input id= "total_money" name="total_money" type="text" />
		</div>
	</label>


</form>

</body>

</html>
HTML dynamically adds input and supports modification

Guess you like
