<JavaScript>讀入Google表單資料自動在網頁上產出下拉選單,製作出類似估價單的頁面 @ 我在彰化寫不停

算是記錄，關於一些技能啦，工作啦，專業上的東西。
因為是自己的記錄，沒有打算很有邏輯的寫，基本上自己看得懂就好。
哪天有人google到或許會有用處。

很多變數定義，名稱，都只是一時亂寫的，正式程式碼當然會再修正，另外因為沒有很熟jQuery可應用的地方，所以
很多部分還是用Javascript寫出來，事實上說不定都可以用jQuery簡化。

然後該網頁當然要記得載入jQuery的最新版，mini該就可以了。

一、達成目標：
1.網頁頁面已經做好，由form及selecet下拉欄位組成，每個下拉欄位有該項目的選項，每個選項有自己的價格，選擇後希望在右方的欄位出現該選項的金額。
2.全部選擇金額選擇好後，最下方的總計欄位會出現全部金額的統計。

二、作法：
在select的onchange()事件呼叫函數(傳入form的ID)，函數判斷該form的selected及值，顯示在右側的欄位。
最下方的總和欄位即時顯示目前選擇的項目的總和，還沒選的預設為0。
例用each函數選擇所有的selected達到總和的計算。

程式碼如下：
#####################

function sumprice(fm){
var stdsum=0;
document.getElementById(fm).price.value =document.getElementById(fm).list.value;
var chkindex=parseInt(document.getElementById(fm).list.selectedIndex);
chkindex=chkindex.toString();
$("option:selected").each(function(i,val){

stdsum=stdsum + parseInt(val.value);

})
document.total.stdpri.value = stdsum;
document.total.sumprice.value =stdsum+parseInt(document.total.stdopt.value);

}
#####################################

三、優化：
1.目前的options選項全部是寫在html裡面，每次要設定選項就要重覆增加許多語法，於是利用外部資料庫或表單的引入讀入來做為options選項，以後更改只需在檔案更動必要的數值，而不需重覆加上html語法。

四、作法：
1.建立資料庫的方式雖然可行但只是為了這次的使用有點太費工，維護者還得學會使用資料庫。後來發現gooogle的舊版本表單建立可以轉成json格式引入讓jquery使用，目前google的表單新版已沒有支援轉成json的功能，但還是可以進到
g.co/oldsheets來建立舊版的試算表，建立後發佈，使用rss，會取得該sheet的key及連結(必須勾選異動時自動發佈，資料才會自動更新)，再將最後的rss改成json，即可獲得json格式，再依序將每個欄位值存入陣列即可供使用。(第一列剛好為標題列)

程式碼：
#####################################
<script type="text/javascript">
function conversheet(json) {
var a=json.feed.entry.length

//categ為一個全域二維陣列
categ=[];

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

categ[i]=[];
categ[i][0]=json.feed.entry[i].gsx$category.$t;
categ[i][1]=json.feed.entry[i].gsx$pric.$t;
categ[i][2]=json.feed.entry[i].gsx$note.$t;

//測試讀到的資料是否正確
//document.write(categ[i][0]+" "+categ[i][1]+" "+categ[i][2]+" </br>");

}
}

</script>
<script type='text/javascript' src='https://spreadsheets.google.com/feeds/list/key值/od7/public/values?alt=json-in-script&callback=conversheet'>
</script>

####################################

2.資料取得後，存放在陣列裡，該陣列為一個全域陣列，目的是要讓新增options的function能應用(有思考過用回傳值的方式，但用全域似乎也沒什麼不妥)
利用onfocus事件，在滑鼠點到該下拉欄位時即觸發，選單即執行，另外因為無法很精確的取得目前選定的selectID，所以多一個傳入參數。
再來為了避免每次觸發都要將所有的資料run一遍，在思考過表單的資料結構後，同一類別的資料會在連續的陣列索引中，所以只要索引>選單量時即可跳出讀入迴圈，於是在程式中加入判斷式(再加上判斷還沒set變數前不判斷，避免第一個
分類誤判)，如此可以較有效率(但如果該類別的資料是位於全部資料的最後，那這類別的資料花費的時間還是會最多，因為讀到最後一分類跳出已經沒意義)

讀取陣列資料自動新增option的程式碼：
######################################
function addopt(pd,slc){

$("#"+slc+"").empty();

for (var i = 0; i < categ.length ; i++) {

if (categ[i][0] == pd) {

$("#"+slc+"").append("<option value="+categ[i][1]+">"+categ[i][2]+"</option>");
var j=i;

} else if(i >j & j!= null){

break;
}

}
};
########################################

五、結果：
網頁載入時，會觸發json格式的讀入及轉換後存在陣列，然後在select的onfocus()會觸發自動增加該select所屬的子選單，事件onchange()時會觸發即時顯示該option的value及自動加總。
應用到的函式有jquery的，也有用javascript的，沒有刻意去查jquery是否有更簡便的寫法，但作動都正常，最主要的是google表單的導入部分，還有便利維護者建立資料不用管程式，如果是多個工作表的存放，
可利用https://spreadsheets.google.com/feeds/worksheets/你的key值/public/basic這網址去查詢目前表單各資料表的名稱(接在key值之後的參數)，例如od7,od8....以此來取得不同資料表的資料。
但對維護者來說此種方式可能太複雜，所以也可以一個工作表就一個表單試算表，依維護者方便來改變作法。

#google舊版試算表的內容如圖

140914-06