【Day29】综合练习:台铁即时时刻表(1/2)

本日小作品:
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] 分散式训练

>>:  [DAY 26] 利用Python程序码让机器人走出隧道1

Spring Framework X Kotlin Day 9 Rest Repository

GitHub Repo https://github.com/b2etw/Spring-Kotlin...

“Work Smart” vs “Work Hard”? (单选题)

孵了很久,终於孵出一篇新文章! 这篇是我思考了很久才决定发表的,因为目前疫情刚趋缓,所以许多企业赶着...

老师!我想知道!如果只使用原生的终端机要怎麽客制化 Prompt 呢!

这篇文章是来自同事的许愿,到底能不能不要安装那些 iTerm2、zsh、oh-my-zsh、字型等等...

[DAY22] Boxenn Use Case Spec

Use Case Spec 这边以之前的 use case 当作例子来撰写测试。 首先要能快速地建立...

【Day 26】迁移学习(Transfer Learning)(上)

Transfer Learning的意思是,假设你现在有一些跟你的task没有直接相关的data,那...