【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

今天要為各位介紹的是Select tag的Option被刪除時不會回到第一個Option選項的處理方式
這個處理方式其實也不太常用到，但是因為有的時候可能還是會有使用到的機會
所以還是決定介紹一下

首先我們一樣先建立一個名為sel的ListBox的下拉選單
還有一個名為del的Input按鈕

<!--刪除Selecr Option值不會回到最頂端的效果:-->
<select id="sel">
  <option value="1">參數一</option>
  <option value="2">參數二</option>
  <option value="3">參數三</option>
  <option value="4">參數四</option>
  <option value="5">參數五</option>
  <option value="6">>參數六</option>
</select>(請先選擇要刪除的參數)
<input id="del" type="button" value="刪除">

緊接著我們再來建立JQuery的Function

$(function(){
  //當按下刪除按鈕時執行
  $("#del").click(function(){
    var optionval;
    //將Option的索引值設定給變數Optionval
    optionindex=$("#sel").find(":selected").index();
    //刪除選取的Option項目
    $("#sel").find(":selected").remove();
    //判斷下拉選單是否還有選項
    if($("#sel option").get(optionindex) != null){
      //如果有則將該選項設為當前選取的項目
      $('#sel option').get(optionindex).selected = true;
    }else{
      //否則就將索引值-1的選項設為當前選取的項目
      $('#sel option').get(optionindex-1).selected = true;
    }
  });
});

這邊比較容易看不懂的地方是在最後一個判斷是的地方，也就是下述這一段

//判斷下拉選單是否還有選項
if($("#sel option").get(optionindex) != null){
  //如果有則將該選項設為當前選取的項目
  $('#sel option').get(optionindex).selected = true;
}else{
  //否則就將索引值-1的選項設為當前選取的項目
  $('#sel option').get(optionindex-1).selected = true;
}

這一段的目的主要在於避免讓刪除Option後系統自動回到預設的第一個選項
$('#sel option').get(optionindex).selected = true;
這個部分是將刪除的Option選項的下一個選項設為選取的選項(有點鬼打牆的FU阿)
$('#sel option').get(optionindex-1).selected = true;
則是將刪除的Option選項的上一個選項設為選取的選項
為什麼有分這兩種呢?
因為我們抓的是下拉選單的index值作為判斷條件
以此例來說「參數六」的index值是5
當我們選取參數六並且刪除參數六了以後我們的index值實際上最大只有4
那麼這個時候系統就會又自動帶第一個Option作為選取項
因此我們要設定暫存的index值減一
這樣就會讓系統將索引值為4的「參數五」設為預設的選取項
最後就讓我們來看一下實際的效果吧~!
Dome

See the Pen 【JQuery操作Select標籤系列介紹】【應用篇】JQuery Select標籤刪除Option選項內容不會回到第一個項目 by jen (@jen_huang) on CodePen.