【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的Code，請參考下述程式碼~!

<!--修改Selecr Option值效果:-->
<select id="sel">
  <option>參數一</option>
  <option>參數二</option>
  <option>參數三</option>
</select>(請先選擇要變更的參數)
<input id="changVal">
<input id="chang" type="button" value="變更值">

緊接著就到了建立JQuery Code的時候了，關於程式碼的解釋請參考下述程式中的註解

$(function(){
  //將所有的input標籤禁用
  $("input").prop("disabled",true);
  //將ID為selVal的標籤開啟使用
  $("#selVal").prop("disabled",false);
  //如果ID為sel的下拉選單值有變換時執行以下內容
  $("#sel").change(function(){
    //啟用所有input標籤
    $("input").prop("disabled",false);
    //如果User點選ID為chang的Button就執行以下內容
    $("#chang").click(function(){
      $("input").prop("disabled",true);
      $("#selVal").prop("disabled",false);
      //sel下拉選單所選取的Option，將其文字內容修改為changVal的值
      $("#sel").find(":selected").text($("#changVal").val());
      //sel下拉選單所選取的Option，將其值修改為changVal的值
      $("#sel").find(":selected").val($("#changVal").val());
    });
  });
  //如果按下ID為selVal的Button時執行以下內容
  $("#selVal").click(function(){
    //顯示目前下拉選單所選取的Option值
    alert($("#sel").find(":selected").val());
  });
});

是的非常簡單的Code只是我為了讓大家可以明確的看到效果
多寫了一點功能，但是我沒有寫防呆喔，所以有時候操作可能會怪怪的
最後讓我們看一下實際的效果吧

Dome

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

C~D~ 這個範例相信應該有呈現出這個主題，如果有任何的疑問或是指教歡迎提出來討論喔~!