JSFiddle - React, Tailwind, and code Playground

by ysuper

HTML

<h2>
動態設定欄位數量+抓值
</h2>
<p></p>
<input type="text" id="types_amount" placeholder="請填寫規格種類數量">

<div id='option'>
</div>

<p></p>
<input type="button" id="button" value='下一步'>

JavaScript

$("#button").click(function() {
	console.log($("#types_amount").val())
  for (n = 1; n <= $("#types_amount").val(); n++) {
		console.log($("#types_"+n).val())
		console.log($("#model_"+n).val())
  }
});

$("#types_amount").change(function() {
	/*jshint multistr: true */
  var html = ""
  for (n = 1; n <= $("#types_amount").val(); n++) {
    html = html + ' \
		<p></p> \
		<select id="types_'+n+'"> \
			<option value selected>Choose...</option> \
			<option value="a">Kuan</option> \
			<option value="b">Beam</option> \
			<option value="c">零件</option> \
		</select> \
		<input type="text" id="model_'+n+'" placeholder="請填寫規格數量"> \
		'
  }
  $("#option").html(html)
});