本日小作品:
https://codepen.io/linchinhsuan/pen/OJXVgdo
重点摘要:
var city = [.......];
var sations = [[],[].......];
台湾每个县市的资料和每个县市的车站资料。
var cityBtn = document.querySelector(".city");
var areaBtn = document.getElementById("area");
for(let i=0;i<city.length;i++){
var option = document.createElement("option");
option.value = city[i];
option.dataset.num = i;
option.textContent = city[i];
cityBtn.appendChild(option);
}
选到那两个select(一个是县市一个是车站),接着跑for回圈,用document.createElement()
语法动态将县市select里面的option创造出来。新增了其value和textContent等等内容,最後再用appendChild()
语法新增到县市select底下。
cityBtn.addEventListener("change",function(e){
areaBtn.innerHTML = '<option value="" selected>请选择车站</option>';
var option = document.querySelectorAll(".city option");
for(let i=0;i<option.length;i++){
if(option[i].selected){
var num = option[i].dataset.num;
var citySation = sations[num];
for(let i=0;i<citySation.length;i++){
var option = document.createElement("option");
option.value = citySation[i];
option.textContent = citySation[i];
areaBtn.appendChild(option);
}
}
}
},false);
在县市的select上面绑定change事件,当使用者选择了县市,就会跑一个for回圈,逐笔去比对哪个option被选到,接着把对应编号的车站用for回圈写到车站的select里面。
---
本日结语:
今天是二十九天,进入了最後两天!今天是做台铁即时时刻表的表面部分,不过这样也预告了明天,也就是铁人赛第三十天的最终小作品是什麽了——没错就是一个用AJAX即时显示查询结果的台铁时刻表网站!
如有写错之处麻烦各路高手指教><
>>: [DAY 26] 利用Python程序码让机器人走出隧道1
GitHub Repo https://github.com/b2etw/Spring-Kotlin...
孵了很久,终於孵出一篇新文章! 这篇是我思考了很久才决定发表的,因为目前疫情刚趋缓,所以许多企业赶着...
这篇文章是来自同事的许愿,到底能不能不要安装那些 iTerm2、zsh、oh-my-zsh、字型等等...
Use Case Spec 这边以之前的 use case 当作例子来撰写测试。 首先要能快速地建立...
Transfer Learning的意思是,假设你现在有一些跟你的task没有直接相关的data,那...