iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 5
1
自我挑戰組

資工的日常系列 第 5

HTML 做出2層的下拉式選單 JQuery

接續前一篇:https://ithelp.ithome.com.tw/articles/10193376
github:https://github.com/fcu-d0440478/WP-HW6.git

JQuery其實就是比較簡短的JavaScript。讓你用幾行的程式碼達成原本的目的。使用JQuery需要在標籤裡引入JQuery的library。通常使用CDN(Content delivery network)來引入JQuery,又名內容傳遞網路。也就是從網路上下載需要的JQuery library讓網頁能執行。像是Google和Microsoft都有JQuery CDN。會自動判斷離你比較近的主機讓你下載。
此外JQuery的程式碼要寫在Document Ready Event裡,確保在XML文件載完之前就跑JQuery。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

引入這串就能使用google的JQuery CDN,記得一定要放在head裡讓他優先載入。

 $(document).ready(function(){
     //JQuery code
 });

JQuery寫在ready event裡。也可以寫成...

$(function(){
   // jQuery methods go here...
});

程式碼:
JQuery語法以"$(目標物).action()"為基本語法。看到"$"很可能就是JQuery。然後以下只講和上一篇JavaScript不一樣的點。

//javaScript
var collegeSelect=document.getElementById("college-list");
collegeSelect.innerHTML=inner;


//JQuery
$("#college-list").html(inner)

javaScript要document.getElementById(id);抓到元素後還要innerHTML才可以丟inner字串進去改裡面的值。JQuery只要$(id)抓元素.html(要丟的值)就完成,簡短了很多。

//javaScript
<body>
    ...
    <select id="college-list" onchange="changeCollege(this.selectedIndex)"></select>
    ...
</body>
<script>
function changeCollege(index){
    var Sinner="";
    for(var i=0;i<sectors[index].length;i++){
        Sinner=Sinner+'<option value=i>'+sectors[index][i]+'</option>';
    }
    var sectorSelect=document.getElementById("sector-list");
    sectorSelect.innerHTML=Sinner;
}
changeCollege(document.getElementById("college-list").selectedIndex);
</script>

javaScript還要在"college-list"這select裡加onchange時呼叫某function。且還要使用
var sectorSelect=document.getElementById("sector-list");
sectorSelect.innerHTML=Sinner;
來丟Sinner進去sector-list的select裡面

//JQuery
$("#college-list").change(function(){
    index=this.selectedIndex;
    var Sinner="";
    for(var i=0;i<sectors[index].length;i++){
        Sinner=Sinner+'<option value=i>'+sectors[index][i]+'</option>';
    }
    $("#sector-list").html(Sinner);
});

JQuery只要透過"#college-list"抓到"college-list"這id('#'抓id '.'抓class 都不加抓xml元素 跟css一樣)就可以直接change的方法。this就是抓到的元素自己,.selectedIndex目前選到的項目。
$("#sector-list").html(Sinner);直接用.html給值。

//javaScript
changeCollege(document.getElementById("college-list").selectedIndex);
//JQuery
$("#college-list").change();

最後呼叫一次change方法。javaScript又要呼叫changeCollege,又要抓用document抓項目給參數。JQuery只要$("#college-list").change();抓到"college-list"這id在呼叫change()方法就結束了。


今天終於撐到第五天了,每天都要花一小時打字好耗時間阿XDD


上一篇
HTML 做出2層的下拉式選單 JavaScript
下一篇
CPE Happy Number
系列文
資工的日常30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
hsng24
iT邦新手 5 級 ‧ 2019-07-25 11:22:48

想請問一下在IE8下,出現"SCRIPT5007: 無法取得未定義或 Null 參考的屬性 'length'"該如何解決 謝謝

我用IE 11測沒出現這狀況,可能考慮重裝或使用其他瀏覽器試試看?

我要留言

立即登入留言