我有這樣的代碼，如何顯示另一個輸入表單。假設我想選擇 value="2" 將顯示 2 個新的輸入表單。
<div class="col-4">
<label for="proses">Proses</label>
<select class="form-control" id="prosess" name="prosess" required>
<option value="" hidden>- Pilih Proses -</option>
<option value="1">1 Proses</option>
<option value="2">2 Proses</option>
<option value="3">3 Proses</option>
<option value="4">4 Proses</option>
<option value="5">5 Proses</option>
<option value="6">6 Proses</option>
<option value="7">7 Proses</option>
<option value="8">8 Proses</option>
<option value="9">9 Proses</option>
</select>
</div>
uj5u.com熱心網友回復：
這就是你要找的嗎？
$('select').change(function(){
const num = $(this).val()
let html = '';
$('input[type="text"]').remove();
for(i = 0; i < num; i ){
html ='<input type="text">'
}
$('form').append(html)
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form action="">
<div class="col-4">
<label for="proses">Proses</label>
<select class="form-control" id="prosess" name="prosess" required>
<option value="" hidden>- Pilih Proses -</option>
<option value="1">1 Proses</option>
<option value="2">2 Proses</option>
<option value="3">3 Proses</option>
<option value="4">4 Proses</option>
<option value="5">5 Proses</option>
<option value="6">6 Proses</option>
<option value="7">7 Proses</option>
<option value="8">8 Proses</option>
<option value="9">9 Proses</option>
</select>
</div>
</form>uj5u.com熱心網友回復：
我希望這能幫到您。我只是創建陣列并保存在狀態中。基于該應用映射來呈現輸入。
function App() {
const [proses, setProses] = useState([])
const handleClick = (e) => {
let inputArray = []
for(var i = 0; i < e.target.value; i ){
inputArray.push(i)
}
setProses(inputArray)
}
const renderInputs = () => {
return proses.map(i => {
return <div>
<input />
</div>
})
}
return (
<div class="col-4">
<label for="proses">Proses</label>
<select class="form-control" onChange={handleClick} id="prosess" name="prosess" required>
<option value="" hidden>- Pilih Proses -</option>
<option value="1">1 Proses</option>
<option value="2" >2 Proses</option>
<option value="3">3 Proses</option>
<option value="4">4 Proses</option>
<option value="5">5 Proses</option>
<option value="6">6 Proses</option>
<option value="7">7 Proses</option>
<option value="8">8 Proses</option>
<option value="9">9 Proses</option>
</select>
{renderInputs()}
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/513586.html