【JQuery操作Select標籤系列介紹】【基礎篇】JQuery Select標籤新增Option選項

測試環境
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

今天起要來開始針對關於JQuery對HTML的Select標籤做一系列相關操作方式及一些應用方式介紹
因為是系列文章，所以會分成很多篇，所以會寫很長的一段時間
首先我們要進行最基礎的Select標籤操作，那就是對Select進行「新增選項 add Option」的工作(小弟我英文不好，發現有錯誤請糾正我一下)
再新增Option的部分，可以分為以下幾種方式

1.新增單一Option效果
2.陣列新增Option效果
3.用each讀取陣列並新增Option效果
4.for迴圈單一Option效果

接下來也會分別介紹這幾種方式的寫法
在正式開始介紹本章節之前，我們一樣要先建立我們今天需要用到的HTML Code

新增單一Option效果:<select id="sel"></select>
陣列新增Option效果:<select id="sel2"></select>
用each讀取陣列並新增Option效果:<select id="sel3"></select>
for迴圈單一Option效果:<select id="sel4"></select>

我們可以看見上面四個Select標籤分別有不一樣的ID，稍後做介紹的時候會分別以這四個Select做範例介紹，
大家可以透過Select的ID去跟範例做對應唷~!

1.新增單一Option效果
這是普通比較常見的設定方式一般大家拜GOOGLE大神也比較常見的新增方式
因為剛開始學有時候我比較懶，就自行發展出懶人寫法了
懶人寫法不確定有沒有什麼後遺症就是了(至少目前沒遇到)請謹慎使用

$(function(){ 
  //將Option加入ID為sel的Select的標籤
  //一般常見寫法
  $("#sel").append($("<option></option>").attr("value", "123").text("123"));
  //懶人寫法，不確定有沒有其它後遺症
  $("#sel").append($("<option value='123'>123</option>")); 
});

2.陣列新增Option效果
用陣列的方式則是可以減少重複寫Code的麻煩
如果你的值沒有規則可循，又不想寫太多重複的Code，那這就是不錯的選擇~!!

$(function(){
  //設定陣列參數
  var array = [ "one", "two", "three", "four", "five" ];
    //設定for迴圈的i等於array的陣列長度
    for( i in array){
      //將Option加入ID為sel2的Select的標籤
      $("#sel2").append($("<option value='" + array[i] + "'>" + array[i] + "</option>"));
    }
  });

3.用each讀取陣列並新增Option效果
第三種其實跟第二種一樣都是透過陣列設定Option的值
只是邏輯上來說第二種是將陣列值丟進For迴圈
而這種則是透過each的function去遍歷陣列中所有的值並將每個值加入到Option中

$(function(){
  //設定陣列參數
  var array = [ "one", "two", "three", "four", "five" ];
  //用each遍歷array中的所有參數，並逐一加將參數加入Option中
  $.each(array, function(i, val) {
    //將Option加入ID為sel3的Select的標籤
    $("#sel3").append($("<option value='" + array[i] + "'>" + array[i] + "</option>"));
  });
});

4.for迴圈單一Option效果
這種使用方式最好是在有規則的情況下使用才不會出現產生的值有錯誤的情況
例如說Select是要讓User選擇時間的情況下因為一天24小時有規則可循

$(function(){
  //設定從0點開始到晚間23時止
  for(var i=0;i<24;i++){
    //如果i小於10要在i的前面補0，以保持畫面顯示是兩位數
    if(i<10){
      //將i值設定給ID為sel4的Select標籤作為Option的值
      $("#sel4").append($("<option value='0" + i + "'>0" + i + "</option>"));
    }else{
      $("#sel4").append($("<option value='" + i + "'>" + i + "</option>")); 
    }    
  }
});

最後在來讓我們看一下各個寫法是否在最後都能夠正常顯示出來
Dome

See the Pen JQuery操作Select標籤「新增Option」 by jen (@jen_huang) on CodePen.

是的我們可以發現這四種寫法都能夠讓Select標籤將設定的值正常顯示出來
剩下的就是要依實際情況選用了，希望這篇文章對大家有所幫助~下回再見!!