【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

今天要為大家介紹看起來沒什麼用處的一個功能，但是越是覺得沒什麼用處
到了要用的時候才會發現它的重要
所以抱著教學的精神還是要介紹一下這個功能(明明就怕自己要用的時候找不到，硬要亂扯)

嗯. . 好就讓我們開始進入今天的教學吧~!!
按照慣例我們要先建立需要用的HTML tag

<!--刪除Selecr Option值效果:-->
<select id="sel">
  <option>參數一</option>
  <option>參數二</option>
  <option>參數三</option>
</select>(請先選擇要刪除的參數)
<input id="del" type="button" value="刪除">
<input id="delall" type="button" value="刪除全部">

可以看到我們在此範例中建立了一個下拉式選單
還有兩個input按鈕分別是「刪除」與「刪除全部」
這兩個input也就是今天要介紹的主要兩種刪除Select Option的方式
緊接著就讓我們來看看這兩中刪除方式的差異吧

刪除(刪除Option清單中的其中一項)

我們可以在下面範例中看到完整的程式代碼

$(function(){
  //當「刪除」的按鈕被按下時執行
  $("#del").click(function(){
    //刪除ID為sel的Select標籤內使用者所選種的Option選項
    $("#sel").find(":selected").remove();
  });
});

這段代碼非常的簡短不過有兩個地方要特別介紹給大家認識一下
首先就是「find()」這個Function這個Function代表的其實是遍歷標籤
而「:selected」代表的則是選取的Option，這個非CSS規範僅JQuery可用
在本文中則是透過這兩種功能的結合來取得選取的Option並進行刪除的動作

刪除全部

在這下述範例中則是介紹刪除全部Option選項的方式

$(function(){
  //當「刪除全部」的按鈕被按下時執行
  $("#delall").click(function(){
    //刪除ID為sel的Select標籤內全部的Option選項
    $("#sel option").remove();
  });
});

這個就沒有什麼太多好介紹的了，但是要特別注意的地方是在選擇器的部分一定要加上Option唷~
不然會將#sel標籤整個刪掉的唷
最後就讓我們實際看看效果吧~!!

Dome

See the Pen 【JQuery操作Select標籤系列介紹】JQuery Select標籤刪除Option選項內容 by jen (@jen_huang) on CodePen.