表單的數量則是由選取的數字去決定，特別的一點式選擇5個表單，則增加6個表單
其他則是照選取的數字而新增幾個
我這個範例呢，用文字方塊取代表單作為說明；範例程式碼包含著一個下拉式選擇以及一個div區塊，id為form
選取下拉式選單時，會觸發onchange事件，事件對應的動作為change (num)
可以由下面程式碼得知，我用index去取得使用者選取的值
從值去判斷選取數值，超過5，則必須執行六次
透過JQuery的append去新增至form id內的文字方塊，id為test+i
function change (num) {
reload ();
index = num.options[num.selectedIndex].value;
switch(parseInt(index)){
case 1:
case 2:
case 3:
case 4:
addTextArea ();
break;
case 5:
index = parseInt(index) + 1;
addTextArea ();
break;
default:
break;
}
}
觸發事件時，我們必須清除原先新增的文字方塊，否則會重疊並造成id重複的問題
所以有另外寫一個reload的函數
reload是透過JQuery的empty做清除form底下的元素
function reload () {
$('#form').empty();
switch(parseInt(index)){
case 1:
case 2:
case 3:
case 4:
clean();
break;
case 5:
index = parseInt(index) + 1;
clean();
break;
default:
break;
}
}
以下是程式碼：
<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="utf-8">
<title>Demo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
var index = 0;
function change (num) {
reload ();
index = num.options[num.selectedIndex].value;
switch(parseInt(index)){
case 1:
case 2:
case 3:
case 4:
addTextArea ();
break;
case 5:
index = parseInt(index) + 1;
addTextArea ();
break;
default:
break;
}
}
function addTextArea () {
for(i = 1; i <= index; i++){
$('#form').append('<textarea placeholder=test id=test'+i+'>')
.append('<br>');
}
}
function clean () {
for(i = 1; i <= index; i++){
$('.test' + i).remove();
}
}
function reload () {
$('#form').empty();
switch(parseInt(index)){
case 1:
case 2:
case 3:
case 4:
clean();
break;
case 5:
index = parseInt(index) + 1;
clean();
break;
default:
break;
}
}
</script>
</head>
<body>
<select class="selectItem" onchange="change(this)">
<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>
</select>
<div id="form"></div>
</body>
</html>
執行結果：
參考資料：
http://api.jquery.com/empty/
http://api.jquery.com/remove/
http://api.jquery.com/append/
http://api.jquery.com/clone/
http://api.jquery.com/attr/
http://edisonx.pixnet.net/blog/post/84832134
http://t.data321.cn/article-45878-1.html
http://stackoverflow.com/questions/7885639/javascript-error-document-getelementsbyid-is-not-a-function
http://www.dotblogs.com.tw/wadehuang36/archive/2010/08/25/jqueryattrclassname.aspx
http://www.w3cplus.com/jquery/attr-removeAttr
http://bigone2000.pixnet.net/blog/post/55174550
http://www.javaworld.com.tw/jute/post/view?bid=42&id=131360&tpg=1&ppg=1&sty=1
http://www.wretch.cc/blog/agreeupon/34667988