<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旧版试算表的内容如图