【JQuery操作Select標籤系列介紹】【應用篇】JQuery Select標籤連動Select標籤

測試環境
JQuery版本	jquery-1.11.1.min.js(jquery-2.1.1.min.js也可使用), jquery-ui-1.10.4.custom.min.js
測試瀏覽器	Chrome36.0,Firefox31.0

今天要來介紹一下Select之間互相連動的方法
有的時候我們會需要A下拉選單選擇Item1時
B下拉選單的Item是1,2,3,4,5而A下拉選單選擇Item2時
B下拉選單的Item是6,7,8,9,10
恩這個功能好像沒什麼用處，但是當你跟資料庫做連結時
就會發現其實常常會用到這個功能，說了這麼多廢話
相信初學的人還是不太懂我的意思，沒關係先有個印象
以後遇到才知道要Ggoogle什麼關鍵字
讓我們進入程式介紹的部份吧

Select Tag:
<select id="sel">
  <option value="0">請選擇</option>
  <option value="1">國家</option>
  <option value="2">地區</option>
</select>
被連動的Select Tag:
<select id="sel2"></select>

在上面我們建立的一個Select Tag叫做sel
當中有三個Item分別是「請選擇」、「國家」、「地區」
他們三個的vlaue值分別為0、1、2(這個是要做為判斷條件記得一定要設定唷)
然後再讓我們看看JQuery的部分

//當sel值改變時觸發事件
$("#sel").change(function(){
  //此處用switch case來作為判斷式
  //並以sel各個Option的Value作為判斷條件
  //注意這邊有用parseInt將value值轉為整數型態否則會出現錯誤
  switch (parseInt($(this).val())){
  //默認行為，可以不寫
  default:
  //當value值為0時刪除sel2的Option Item
  case 0: 
      $("#sel2 option").remove();
      break;
  //當value值為1時刪除sel2的Option Item 
  //並用陣列及each迴圈新增sel2的Option Item選項
  case 1: 
      $("#sel2 option").remove();
      var array = [ "美國", "台灣", "中國", "英國", "法國" ];
      //利用each遍歷array中的值並將每個值新增到Select中
      $.each(array, function(i, val) {
        $("#sel2").append($("<option value='" + array[i] + "'>" + array[i] + "</option>"));
      });      
      break;
  case 2: 
      $("#sel2 option").remove();
      var array = [ "歐洲", "亞洲", "非洲", "大洋洲", "南美洲", "北美洲", "南極洲" ];
      //利用each遍歷array中的值並將每個值新增到Select中
      $.each(array, function(i, val) {
        $("#sel2").append($("<option value='" + array[i] + "'>" + array[i] + "</option>"));
      });      
      break;
 }
});

如果想要了解JQuery關於Select的其它相關操作或應用可以參考
【JQuery操作Select標籤系列介紹】
在這邊就不再另外去介紹以前寫過的Code了，避免看的太辛苦
最後大家可以看看實際Dome出來的效果唷


Dome

See the Pen 【JQuery操作Select標籤系列介紹】【應用篇】JQuery Select標籤連動Select標籤 by jen (@jen_huang) on CodePen.